【JavaScript】String字符串一览汇总

1. 字符串与字符串对象

1. 1 字符串字面量

1.1.1 定义

字符串就是零个或多个排在一起的字符，放在单引号或双引号之中。

// 通常字符串放在单引号或者双引号中
'zxxxaz'
"ddsae4"
// 单引号字符串中可以直接用双引号，若使用单引号需要添加转义符/转义，这个规则对双引号字符串也适用
'key = "value"'
"It's a hard experende!"

'Did she say \'Hello\'?' // "Did she say 'Hello'?" 
"Did she say \"Hello\"?" // "Did she say 'Hello'?" 

//  String 函数将其他值生成或转换成字符串：
String('thing') // 'thing'

ES6新增：从 ECMAScript 2015 开始，字符串字面量也可以称为模板字面量，适用模板字符表示字符串：

`hello world` `hello! world!` `hello ${who}` escape `<a>${who}</a>`

1.1.2 长字符串

字符串多行，可以在每一行的尾部使用反斜杠/：

'long \
long \
ago';  // "long long ago"

链接运算符+

'long ' +
'long ' +
'ago';  // "long long ago"

字符串可以视为字符数组，获取字符串具体位置的字符，可以使用数组的方括号运算符返回某个位置的字符（位置编号从0开始），但字符串之中的单个字符无法修改 。

'abc'[3] // undefined
'abc'[-1] // undefined
'abc'['x'] // undefined

1.1.3 Base64 转码

Base64 就是一种编码方法，就是把ASCII吗字符转成 0～9、A～Z、a-z、+和/这64个字符组成的可打印字符。使用的主要目的是为了不出现特殊字符，而简化程序的处理。

JavaScript 原生提供两个 Base64 相关的方法。

• btoa()：任意值转为 Base64 编码

• atob()：Base64 编码转为原来的值

  var string = 'Hello World!';
  btoa(string) // "SGVsbG8gV29ybGQh"
  atob('SGVsbG8gV29ybGQh') // "Hello World!"
  

要将非 ASCII 码字符转为 Base64 编码，必须中间插入一个转码环节，再使用这两个方法。

function b64Encode(str) {
  return btoa(encodeURIComponent(str));
}

function b64Decode(str) {
  return decodeURIComponent(atob(str));
}

b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"

1.2 字符串对象

适用new String()创建的字符串即为字符串对象：

var s2 = new String('abc');
typeof s2 // "object"

字符串对象是一个类似数组的对象（很像数组，但不是数组）。

new String('abc')
// String {0: "a", 1: "b", 2: "c", length: 3}
(new String('abc'))[1] // "b"

上面代码中，字符串abc对应的字符串对象，有数值键（0、1、2）和length属性，所以可以像数组那样取值。

1.3 基本字符串和字符串对象的区别

	定义
字符串字面量	通过单引号或双引号定义、直接调用String方法(没有通过new生成字符串对象实例)的字符串都是基本字符串。
字符串对	通过new生成字符串对象实例)的字符串。

只有将基本字符串转化为字符串对象之后才可以使用字符串对象的方法。当基本字符串需要调用一个字符串对象才有的方法或者查询值的时候(基本字符串是没有这些方法的)。JavaScript 会自动将基本字符串转化为字符串对象并且调用相应的方法或者执行查询。

重点！！！JavaScript会自动将基本字符串转换为字符串对象。

区别与差异：

• 字符串与String对象的不同在于返回的typeof值，前者返回的是string类型，后者是Object类型。

  var s_prim = "foo";
  var s_obj = new String(s_prim);
  
  console.log(typeof s_prim); // Logs "string"
  console.log(typeof s_obj);  // Logs "object"
  

• 当使用 eval时，基本字符串和字符串对象也会产生不同的结果。eval 会将基本字符串作为源代码处理; 而字符串对象则被看作对象处理, 返回对象。 例如：

  s1 = "2 + 2";               // creates a string primitive
  s2 = new String("2 + 2");   // creates a String object
  console.log(eval(s1));      // returns the number 4
  console.log(eval(s2));      // returns the string "2 + 2"
  

• 利用 valueOf 方法，我们可以将字符串对象转换为其对应的基本字符串。

  console.log(eval(s2.valueOf())); // returns the number 4
  

由于 JS会自动进行字符串与字符串对象之间进行转换，因此，任何一个字符串常量都可以看作是一个String对象，其可以直接作为对象使用，只要在字符串变量的后面加 “.” 便可以直接调用String对象的属性和方法。

后文将不会对字符串及字符串对象进行明显区分。

2. 字符串静态方法

• String.fromCharCode()

String对象提供的静态方法（即定义在对象本身，而不是定义在对象实例的方法），主要是String.fromCharCode()。

• 该方法的参数是一个或多个数值，代表 Unicode 码点，返回值是这些码点组成的字符串。String.fromCharCode方法的参数为空，就返回空字符串；否则，返回参数对应的 Unicode 字符串。

  String.fromCharCode() // ""
  String.fromCharCode(97) // "a"
  String.fromCharCode(104, 101, 108, 108, 111)
  // "hello"
  

• 不支持 Unicode 码点大于0xFFFF的字符。当字符串大于大于0xFFFF（即十进制的 65535）时，码点大于0xFFFF的字符占用四个字节，而 JavaScript 默认支持两个字节的字符。而该方法回忽略超出的两个字节，导致错误

  String.fromCharCode(0x20BB7)
  // "ஷ"
  String.fromCharCode(0x20BB7) === String.fromCharCode(0x0BB7)
  // true
  

3. 字符串实例属性

String.prototype.length：字符串实例的length属性返回字符串的长度。

'abc'.length // 3

4 字符串实例方法

• String.prototype.charAt()

  charAt方法返回指定位置的字符，参数是从0开始编号的位置。

  var s = new String('abc');
  
  s.charAt(1) // "b"
  s.charAt(s.length - 1) // "c"
  	
  // 这个方法完全可以用数组下标替代。
  	'abc'.charAt(1) // "b"
  'abc'[1] // "b"
  

  如果参数为负数，或大于等于字符串的长度，charAt返回空字符串。

  'abc'.charAt(-1) // ""
  'abc'.charAt(3) // ""
  

• String.prototype.charCodeAt()

  charCodeAt()方法返回字符串指定位置的 Unicode 码点（十进制表示），相当于String.fromCharCode()的逆操作。

  'abc'.charCodeAt(1) // 98 `abc`的`1`号位置的字符是`b`，它的 Unicode 码点是`98`。
  

  'abc'.charCodeAt() // 97  如果没有任何参数，`charCodeAt`返回首字符的 Unicode 码点。
  
  // 如果参数为负数，或大于等于字符串的长度，`charCodeAt`返回`NaN`。
  'abc'.charCodeAt(-1) // NaN
  'abc'.charCodeAt(4) // NaN
  

  注意，charCodeAt方法返回的 Unicode 码点不会大于65536（0xFFFF），也就是说，只返回两个字节的字符的码点。如果遇到码点大于 65536 的字符（四个字节的字符），必须连续使用两次charCodeAt，不仅读入charCodeAt(i)，还要读入charCodeAt(i+1)，将两个值放在一起，才能得到准确的字符。

• String.prototype.concat()

  concat方法用于连接两个字符串，返回一个新字符串，不改变原字符串。

  var s1 = 'abc';
  var s2 = 'def';
  
  s1.concat(s2) // "abcdef"
  s1 // "abc"
  

  该方法可以接受多个参数。如果参数不是字符串，concat方法会将其先转为字符串，然后再连接。

  'a'.concat('b', 'c') // "abc"
  
  
  ''.concat(1, 2, '3') // "123" 将参数先转成字符串再连接，所以返回的是一个三个字符的字符串
  1 + 2 + '3' // "33"  加号运算符在两个运算数都是数值时，不会转换类型，所以返回的是一个两个字符的字符串。
  

• String.prototype.slice()

  slice()方法用于从原字符串取出子字符串并返回，不改变原字符串。它的第一个参数是子字符串的开始位置，第二个参数是子字符串的结束位置（不含该位置）。

  'JavaScript'.slice(0, 4) // "Java"
  
  // 如果只有一个参数，表示取该位置到结尾的字符串
  'JavaScript'.slice(4) // "Script"
  
  // 如果参数是负值，表示从结尾开始倒数计算的位置，即该负值加上字符串长度。
  'JavaScript'.slice(-6) // "Script"
  'JavaScript'.slice(0, -6) // "Java"
  'JavaScript'.slice(-2, -1) // "p"
  
  // 如果第一个参数大于第二个参数（正数情况下），`slice()`方法返回一个空字符串。
  'JavaScript'.slice(2, 1) // ""
  

• String.prototype.substring()

  substring方法用于从原字符串取出子字符串并返回，不改变原字符串，跟slice方法很相像。它的第一个参数表示子字符串的开始位置，第二个位置表示结束位置（返回结果不含该位置）。

  'JavaScript'.substring(0, 4) // "Java"
  
  // 如果省略第二个参数，则表示子字符串一直到原字符串的结束。
  'JavaScript'.substring(4) // "Script"
  
  // 如果第一个参数大于第二个参数，`substring`方法会自动更换两个参数的位置。
  'JavaScript'.substring(10, 4) // "Script"
  // 等同于
  'JavaScript'.substring(4, 10) // "Script"
  
  // 如果参数是负数，`substring`方法会自动将负数转为0。
  'JavaScript'.substring(-3) // "JavaScript"
  'JavaScript'.substring(4, -3) // "Java"
  

  由于这些规则违反直觉，因此不建议使用substring方法，应该优先使用slice。

• String.prototype.substr()

  substr方法用于从原字符串取出子字符串并返回，不改变原字符串，跟slice和substring方法的作用相同。

  // `substr`方法的第一个参数是子字符串的开始位置（从0开始计算），第二个参数是子字符串的长度。
  
  'JavaScript'.substr(4, 6) // "Script"
  
  // 如果省略第二个参数，则表示子字符串一直到原字符串的结束。
  'JavaScript'.substr(4) // "Script"
  
  // 如果第一个参数是负数，表示倒数计算的字符位置。如果第二个参数是负数，将被自动转为0，因此会返回空字符串。
  'JavaScript'.substr(-6) // "Script"
  'JavaScript'.substr(4, -1) // ""
  

• String.prototype.indexOf()，String.prototype.lastIndexOf()

  indexOf方法用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是匹配开始的位置。如果返回-1，就表示不匹配。

  'hello world'.indexOf('o') // 4
  'JavaScript'.indexOf('script') // -1
  
  // `indexOf`方法还可以接受第二个参数，表示从该位置开始向后匹配。
  'hello world'.indexOf('o', 6) // 7
  

  lastIndexOf方法的用法跟indexOf方法一致，主要的区别是lastIndexOf从尾部开始匹配，indexOf则是从头部开始匹配。

  'hello world'.lastIndexOf('o') // 7
  
  // `lastIndexOf`的第二个参数表示从该位置起向前匹配。
  'hello world'.lastIndexOf('o', 6) // 4
  

• String.prototype.trim()

  • trim方法用于去除字符串两端的空格，返回一个新字符串，不改变原字符串。

  '  hello world  '.trim()
  // "hello world"
  

  • 去除的不仅是空格，还包括制表符（\t、\v）、换行符（\n）和回车符（\r）。

  '\r\nabc \t'.trim() // 'abc'
  

• String.prototype.toLowerCase()，String.prototype.toUpperCase()

  toLowerCase方法用于将一个字符串全部转为小写，toUpperCase则是全部转为大写。它们都返回一个新字符串，不改变原字符串。

  'Hello World'.toLowerCase()
  // "hello world"
  
  'Hello World'.toUpperCase()
  // "HELLO WORLD"
  

• String.prototype.match()

  match方法用于确定原字符串是否匹配某个子字符串，返回一个数组，成员为匹配的第一个字符串。如果没有找到匹配，则返回null。

  'cat, bat, sat, fat'.match('at') // ["at"]
  'cat, bat, sat, fat'.match('xt') // null
  

  返回的数组还有index属性和input属性，分别表示匹配字符串开始的位置和原始字符串。

  var matches = 'cat, bat, sat, fat'.match('at');
  matches.index // 1
  matches.input // "cat, bat, sat, fat"
  

  match方法还可以使用正则表达式作为参数。

• String.prototype.search()，String.prototype.replace()， String.prototype.replaceAll

  search方法的用法基本等同于match

  • 返回值为匹配的第一个位置。如果没有找到匹配，则返回-1；
  • 使用正则表达式作为参数。

  'cat, bat, sat, fat'.search('at') // 1
  

  replace方法用于替换匹配的子字符串：

  • 一般情况下只替换第一个匹配（除非使用带有g修饰符的正则表达式）；
  • 可以使用正则表达式作为参数

  'aaa'.replace('a', 'b') // "baa"
  'hello world'.replace(/o/g, '_'); // hell_ w_rld
  

  replaceAll为es12新增方法：

  • 相比于String.prototype.replace，String.prototype.replaceAll会替换所有匹配的字符，使简单的全局替换不强依赖正则了

  'hello world'.replace('o', '_'); // hell_ world
  'hello world'.replaceAll('o', '_'); // hell_ w_rld 
  

• String.prototype.split()

  • split方法按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组。

  'a|b|c'.split('|') // ["a", "b", "c"]
  
  // 如果分割规则为空字符串，则返回数组的成员是原字符串的每一个字符。
  'a|b|c'.split('') // ["a", "|", "b", "|", "c"]
  
  // 如果省略参数，则返回数组的唯一成员就是原字符串。
  'a|b|c'.split() // ["a|b|c"]
  
  // 如果满足分割规则的两个部分紧邻着（即两个分割符中间没有其他字符），则返回数组之中会有一个空字符串。
  'a||c'.split('|') // ['a', '', 'c']
  // 	如果满足分割规则的部分处于字符串的开头或结尾（即它的前面或后面没有其他字符），则返回数组的第一个或最后一个成员是一个空字符串。
  '|b|c'.split('|') // ["", "b", "c"]
  'a|b|'.split('|') // ["a", "b", ""]
  

  • split方法还可以接受第二个参数，限定返回数组的最大成员数。

  'a|b|c'.split('|', 0) // []
  'a|b|c'.split('|', 1) // ["a"]
  'a|b|c'.split('|', 2) // ["a", "b"]
  'a|b|c'.split('|', 3) // ["a", "b", "c"]
  'a|b|c'.split('|', 4) // ["a", "b", "c"]
  

  • split方法还可以使用正则表达式作为参数。

• String.prototype.localeCompare()

  localeCompare方法用于比较两个字符串

  • 返回一个整数：
    • 如果小于0，表示第一个字符串小于第二个字符串；
    • 如果等于0，表示两者相等；
    • 如果大于0，表示第一个字符串大于第二个字符串。

  'apple'.localeCompare('banana') // -1
  'apple'.localeCompare('apple') // 0
  

  • 该方法的最大特点，就是会考虑自然语言的顺序。

    // 正常情况下，大写的英文字母小于小写字母。
    // 因为 JavaScript 采用的是 Unicode 码点比较，`B`的码点是66，而`a`的码点是97。
    'B' > 'a' // false
    
     // `localeCompare`方法会考虑自然语言的排序情况，将`B`排在`a`的前面。
     	'B'.localeCompare('a') // 1  表示`B`较大。
    

  • localeCompare还可以有第二个参数，指定所使用的语言（默认是英语），然后根据该语言的规则进行比较。

  // `de`表示德语，`sv`表示瑞典语。德语中，`ä`小于`z`，所以返回`-1`；瑞典语中，`ä`大于`z`，所以返回`1`。
  'ä'.localeCompare('z', 'de') // -1
  'ä'.localeCompare('z', 'sv') // 1