JavaScript的String对象

今天药忘吃喽~ 2022-02-24 10:58 216阅读 0赞

> 在前面的Object对象和Number对象中，都着重讲了其静态方法，而String对象的静态方法比较少，这里主要讲的是String对象的实例方法，也就是String构造函数的原型对象的方法。  
> String对象很重要，内容也比较多，这里介绍一些常用的内容

## 一、String 对象是基本包装类型 ##

JavaScript的String对象是js原生对象（独立于宿主环境的ECMAScript提供的对象）中基本包装类型的3种对象中的一个。  
如果我们在js中声明了一个基本类型的字符串，仍然可以使用String对象的方法。

var str='abc';
    str.length

这是因为在执行str.length 这段代码时，js解析器做了这样的事情

1.  临时创建String类型的一个实例
2.  在实例上调用指定的方法
3.  销毁这个实例

var str = 'abc';
    var _str = new String(str);
    console.log(_str.length);
    _str = null;

PS：其他两种基本包装类型（Number对象和Boolean对象）也有这种特性。

## 二、String 对象实例的创建方式 ##

1.  new String(Value) 构造函数：返回一个内容为Value的String对象
2.  直接赋值(推荐)

## 三、String 对象实例的属性和方法 ##

我们通过一个字符串和Chrome浏览器控制台来验证String对象的属性和方法。

1.  #### length： 返回字符串中的字符数 ####
    
        'abcDEabc'.length    //8
2.  #### charAt（index）：返回一个字符串中指定位置的字符 ####
    
    > 参数：必需。索引值，从0开始计算  
    > 返回值：字符串中指定位置的字符，若传入个不存在的索引数值，返回一个空字符串
    
        'abcDEabc'.charAt(0)    //a
        'abcDEabc'[0]   //这种写法和str.charAt(0) 等效
3.  #### charCodeAt(index) ：返回一个字符串中指定位置字符的Unicode编码 ####
    
    > 说明：用法基本同charAt(),但若传入个不存在的索引数值，返回NaN
    
        'abcDEabc'.charCodeAt(0)   //97
        'abcDEabc'.charCodeAt(10)   //NaN 若传入个不存在的索引数值，返回NaN
        'abcDEabc'.charAt(10)     //"" charAt若传入个不存在的索引数值，返回空字符串
4.  #### concat() :连接一个或多个字符串,并返回连接后的字符串 ####
    
    > 参数：一个或多个字符串,多个字符串用逗号分隔  
    > 返回值：连接后的字符串  
    > 说明：原字符串不变
    
        var str='abcDEabc'
        str.concat('ABC','E','F')   //"abcDEabcABCEF"
        str   //"abcDEabc"
5.  #### indexOf() ：从前往后查找一个字符串，并返回找到的位置(索引) ####
    
    > 参数：1、要查找的字符串 2、开始查找的起始位置，默认从位置0开始查找  
    > 返回值：返回找到的位置(从0开始计数)。若未找到，返回-1  
    > 说明：原字符串不变
    
        'abcDEabc'.indexOf('D')  //3
        'abcDEabc'.indexOf('D',3)   //3,从第4个字符开始查找D
        'abcDEabc'.indexOf('D',4)   //-1,从第5个字符开始查找D
        'abcDEabc'.indexOf('ab')    //0
        'abcDEabc'.indexOf('ac')    //-1
6.  #### lastIndexOf() ： 返回字符串中一个子串最后出现的索引 ####
    
    > 参数：1、要查找的字符串 2、开始查找的起始位置，默认从位置0开始查找  
    > 返回值：存放匹配结果的数组，如果没有找到任何匹配的文本， match() 将返回 null。  
    > 说明：原字符串不变
    
        'abcDEabc'.lastIndexOf('b')  //6
        'abcDEabc'.indexOf('b')      //1
7.  #### match(regexp) :检查一个字符串是否匹配一个正则表达式，详见JavaScript的RegExp 对象。 ####
    
    > 参数：一个正则表达式,如果传入字符串，**match方法内部会隐式的调用 new RegExp() 将其转换成一个正则实例**  
    > **返回值**：匹配成功则返回一个数组，失败返回null  
    > 匹配成功分两种情况，非全局匹配和全局匹配  
    > **非全局匹配**: 返回一个数组  
    > ①数组的第一项是匹配结果。如果不传参则匹配结果为空字符串。②index 属性，标明匹配结果在文本中的起始位置。③input 属性，显示源文本。④groups 属性，它存储的不是捕获组的信息，而是捕获命名的信息。  
    > **全局匹配**: 返回一个数组，捕获的若干结果在数组中依次排列。因为要返回所有匹配的结果，其他的信息，包括捕获组和若干属性就无法列出了。  
    > 说明：1 原字符串不变
    
        'abcDEabc'.match('abc')  //["abc", index: 0, input: "abcDEabc", groups: undefined]
        'abcDEabc'.match(/abc/) 
        'abcDEabc'.match(/abc/g)  //["abc", "abc"]
8.  #### replace(): 将给定字符串替换匹配结果，并返回新的替换后的文本。 ####
    
    > 参数：  
    > 1、第一个参数可以是字符串或者正则表达式，它的作用是匹配。  
    > 2、第二个参数可以是字符串或者函数，它的作用是替换。  
    > 返回值：替换后的文本  
    > 说明：原字符串不变
    
        'abcDEabc'.replace(/abc/g,'123')   //"123DE123"
        'abcDEabc'.replace(/abc/g,function(match){ return '123'})  //"123DE123"
9.  #### search(regexp) :执行一个正则表达式匹配查找,找出首次匹配项的索引。 ####
    
    > 参数：一个正则表达式,与match一样，如果传入一个非正则表达式，它会调用 new RegExp() 将其转换成一个正则实例。  
    > 返回值：只能返回首次匹配的位置，全局匹配对它无效;如果匹配失败，返回 -1 。
    
        'abcDEabc'.search(/abc/)  //0
        'abcDEabc'.search(/abc/g)  //0
        'abcDEabc'.search('abc')   //0
10. #### slice(start,end) :在字符串中从start到end截取一个字符串 ####
    
    > 参数：①开始位置 ②截止位置  
    > 当接收的参数是负数时，slice会将它字符串的长度与对应的负数相加，结果作为参数;如果仅有一个参数，则从start开始到末尾。  
    > 返回值：返回一个新的字符串,包括 start 处的字符,但不包括 end 处的字符,其长度为 end 减 start;  
    > 说明：原字符串不变
    
        'abcDEabc'.slice(1,3)  //"bc"
        'abcDEabc'.slice(1)  //"bcDEabc"，仅有一个参数，则从位置2开始到末尾。
        'abcDEabc'.slice(1,-1)  //"bcDEab",第二个参数是负数，相当于str.slice(1,7)，7=str.length+(-1)
        'abcDEabc'.slice(-5)  //"DEabc",相当于str.slice(3)，即从第四个字符开始到末尾
11. #### split(separator,howmany) :根据传入的分隔符切割源文本。返回一个由被切割单元组成的数组。 ####
    
    > 参数：  
    > ① 字符串或者正则表达式，作为分隔符；②可选，限制返回数组的最大长度。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。  
    > 返回值：一个由被切割单元组成的数组,不包含分隔符  
    > 说明：原字符串不变
    
        'abcDEabc'.split('abc')  //["", "DE", ""]
        'abcDEabc'.split('abc',2)  //["", "DE"]
        'abcDEabc'.split(/[A-Z]/)   //["abc", "", "abc"]
12. #### substr(start \[,length\]) ：返回一个从指定位置开始的指定长度的子字符串 ####
    
    > 语法：stringObject.substr(start \[, length \])  
    > 参数：①start 必需 所需的子字符串的起始位置；②length 可选 在返回的子字符串中应包括的字符个数  
    > 如果仅有一个参数，则从start开始到末尾;  
    > 当接收的第一个参数是负数时,substr是将第一个参数与字符串长度相加后的结果作为第一个参数  
    > 返回值：一个由被切割单元组成的数组,不包含分隔符  
    > 说明：原字符串不变
    
        'abcDEabc'.substr(1,2)    // "bc"
        'abcDEabc'.substr(1)       //"bcDEabc" 从索引1开始，末尾结束
        'abcDEabc'.substr(-3,2)     //"ab"，start为-3+8，即起始索引号是5，长度2
        'abcDEabc'.substr(1,10)   //"bcDEabc",不会补空格到10个字符
13. #### substring(start,end) : 用于提取字符串中介于两个指定下标之间的字符。 ####
    
    > 语法：stringObject.substring(start,end)  
    > 参数：①start 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。  
    > ②end 可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。  
    > 返回值：  
    > 返回stringObject 的一个子字符串，其内容是从 start 处到 end-1 处的所有字符，其长度为 end减 start  
    > 如果 start 与 end 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。  
    > 如果 start 比 end 大，那么该方法在提取子串之前会先交换这两个参数。  
    > 如果 start 或 end 为负数，那么它将被替换为 0。  
    > 如果仅有一个参数，则从start开始到末尾  
    > 说明：substring()和slice()方法功能相近，在参数的处理上有些区别
    
        'abcDEabc'.substring(3,5)  //"DE"
        'abcDEabc'.substring(5,3)  //"DE",与str.substring(3,5)结果一致
        'abcDEabc'.slice(5,3)   //"",不会交换参数
        'abcDEabc'.substring(-5)  //"abcDEabc",相当于str.substring(0)
        'abcDEabc'.slice(-5)  //"DEabc",相当于str.slice(3)
14. #### toLowerCase() :将整个字符串转成小写字母。 ####
    
    > 语法：stringObject.toLowerCase()  
    > 参数：无  
    > 返回值：一个新的字符串，在其中 stringObject 的所有大写字符全部被转换为了小写字符
    
        'abcDEabc'.toLowerCase()   //"abcdeabc"
15. #### toUpperCase():将整个字符串转成小写字母。 ####
    
    > 语法：stringObject.toUpperCase()  
    > 参数：无  
    > 返回值：一个新的字符串，在其中 stringObject 的所有小写字符全部被转换为了大写字符
    
        'abcDEabc'.toUpperCase()   //"ABCDEABC"

## 附录： ##

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>anchor()</td> 
   <td>创建 HTML 锚。</td> 
  </tr> 
  <tr> 
   <td>big()</td> 
   <td>用大号字体显示字符串。</td> 
  </tr> 
  <tr> 
   <td>blink()</td> 
   <td>显示闪动字符串。</td> 
  </tr> 
  <tr> 
   <td>bold()</td> 
   <td>使用粗体显示字符串。</td> 
  </tr> 
  <tr> 
   <td><strong>charAt()</strong></td> 
   <td>返回在指定位置的字符。</td> 
  </tr> 
  <tr> 
   <td><strong>charCodeAt()</strong></td> 
   <td>返回在指定的位置的字符的 Unicode 编码。</td> 
  </tr> 
  <tr> 
   <td><strong>concat()</strong></td> 
   <td>连接字符串。</td> 
  </tr> 
  <tr> 
   <td>fixed()</td> 
   <td>以打字机文本显示字符串。</td> 
  </tr> 
  <tr> 
   <td>fontcolor()</td> 
   <td>使用指定的颜色来显示字符串。</td> 
  </tr> 
  <tr> 
   <td>fontsize()</td> 
   <td>使用指定的尺寸来显示字符串。</td> 
  </tr> 
  <tr> 
   <td>fromCharCode()</td> 
   <td>从字符编码创建一个字符串。</td> 
  </tr> 
  <tr> 
   <td><strong>indexOf()</strong></td> 
   <td>检索字符串。</td> 
  </tr> 
  <tr> 
   <td>italics()</td> 
   <td>使用斜体显示字符串。</td> 
  </tr> 
  <tr> 
   <td>lastIndexOf()</td> 
   <td>从后向前搜索字符串。</td> 
  </tr> 
  <tr> 
   <td>link()</td> 
   <td>将字符串显示为链接。</td> 
  </tr> 
  <tr> 
   <td>localeCompare()</td> 
   <td>用本地特定的顺序来比较两个字符串。</td> 
  </tr> 
  <tr> 
   <td><strong>match()</strong></td> 
   <td>找到一个或多个正则表达式的匹配。</td> 
  </tr> 
  <tr> 
   <td><strong>replace()</strong></td> 
   <td>替换与正则表达式匹配的子串。</td> 
  </tr> 
  <tr> 
   <td><strong>search()</strong></td> 
   <td>检索与正则表达式相匹配的值。</td> 
  </tr> 
  <tr> 
   <td><strong>slice()</strong></td> 
   <td>提取字符串的片断，并在新的字符串中返回被提取的部分。</td> 
  </tr> 
  <tr> 
   <td>small()</td> 
   <td>使用小字号来显示字符串。</td> 
  </tr> 
  <tr> 
   <td><strong>split()</strong></td> 
   <td>把字符串分割为字符串数组。</td> 
  </tr> 
  <tr> 
   <td>strike()</td> 
   <td>使用删除线来显示字符串。</td> 
  </tr> 
  <tr> 
   <td>sub()</td> 
   <td>把字符串显示为下标。</td> 
  </tr> 
  <tr> 
   <td><strong>substr()</strong></td> 
   <td>从起始索引号提取字符串中指定数目的字符。</td> 
  </tr> 
  <tr> 
   <td><strong>substring()</strong></td> 
   <td>提取字符串中两个指定的索引号之间的字符。</td> 
  </tr> 
  <tr> 
   <td>sup()</td> 
   <td>把字符串显示为上标。</td> 
  </tr> 
  <tr> 
   <td>toLocaleLowerCase()</td> 
   <td>把字符串转换为小写。</td> 
  </tr> 
  <tr> 
   <td>toLocaleUpperCase()</td> 
   <td>把字符串转换为大写。</td> 
  </tr> 
  <tr> 
   <td><strong>toLowerCase()</strong></td> 
   <td>把字符串转换为小写。</td> 
  </tr> 
  <tr> 
   <td><strong>toUpperCase()</strong></td> 
   <td>把字符串转换为大写。</td> 
  </tr> 
  <tr> 
   <td>toSource()</td> 
   <td>代表对象的源代码。</td> 
  </tr> 
  <tr> 
   <td>toString()</td> 
   <td>返回字符串。</td> 
  </tr> 
  <tr> 
   <td>valueOf()</td> 
   <td>返回某个字符串对象的原始值。</td> 
  </tr> 
 </tbody> 
</table>

## ES6中新增的方法 ##

详细内容参阅[ES6 String的扩展][ES6 String]  
ES6 提供了三种新方法，用来确定一个字符串是否包含在另一个字符串中，相比indexof方法代码简练很多。

1.  includes()：返回布尔值，表示是否找到了参数字符串。
2.  startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
3.  endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。
4.  repeat():返回一个新字符串，表示将原字符串重复n次。
5.  codePointAt() :返回字符码点的十进制值

另外还有一个值得关注的静态方法String.fromCharCode()，该方法可接受一个或多个指定的 Unicode 值，然后返回一个字符串。  
String 对象实例中的有方法charCodeAt()，可返回指定位置的字符的 Unicode 编码  
String 对象静态方法fromCharCode()，可根据Unicode码返回字符串

"a".charCodeAt(0)   //97
    String.fromCharCode(97)  //a
    "我".charCodeAt(0).toString(16)      //"6211"
    String.fromCharCode(0x6211)     //"我"

[ES6 String]: https://blog.csdn.net/dreamingbaobei3/article/details/101425819