本文共 8401 字，大约阅读时间需要 28 分钟。

序言

JavaScript 字符串由16位码元（code unit）组成。对于多数 字符 来说，每16位码元（相当于索引）对应一个字符。

• 重点：所有字符串方法都不会改变原始字符串

操作方法

split()

• 作用：切割字符串

• 语法：array.spit('切割符号',多少个)：

• 参数：

  • 切割符号：按照你写的符号把字符串切割开来
    • 如果不写：那么就直接切割一个完整的
    • 如果写一个空字符串(’’)：则按照一位一位的切割
  • 多少个：选填，默认是全部，表示你切割完以后保留多少个

• 返回值：以数组形式保持每一段内容

var str = '2020-12-12';var res1 = str.split('-');console.log(res1);	// ['2020','12','12']var res2 = str.split('-',2);console.log(res2);	// ['2020','12']var res3 = str.split();console.log(res3);	// ['2020-12-12']var res4 = str.split('');console.log(res4);	// ['2','0','2','0','-','1','2','-','1','2']

concat()

• 作用：拼接字符串
• 语法：array1.concat(array2)：
• 参数：要拼接的字符串
• 返回值：拼接好的字符串

var str1 = 'hello';var str2 = 'world';var res = str1.concat(str2);console.log(res);	// helloworld

repeat()【ES6】

• 作用：构造并返回一个新字符串
• 语法：array.repeat()：
• 参数：表示在新构造的字符串中重复了多少遍原字符串
• 返回值： 包含指定字符串的指定数量副本的新字符串。

"abc".repeat(-1)     // RangeError: repeat count must be positive and less than inifinity"abc".repeat(0)      // """abc".repeat(1)      // "abc""abc".repeat(2)      // "abcabc""abc".repeat(3.5)    // "abcabcabc" 参数count将会被自动转换成整数."abc".repeat(1/0)    // RangeError: repeat count must be positive and less than inifinity

replace()

• 作用：替换字符串内的某些字符（只能替换查找到的第一个）
• 语法：array.replace('要被替换的字符','替换成的字符')：
• 返回值：替换好的字符串

var str = 'H HH HH H';var res1 = str.replace('H','**');console.log(res1);	// * HH HH Hvar res2 = str.replace('HH','**');console.log(res2);	// H ** HH Hvar res3 = str.replace('h','*');console.log(res3);	// H HH HH H

1. 找到第一个 H，然后替换为 *
2. 找到第一个 HH，然后替换为 **
3. 由于找不到 h，所以不就进行替换

截取方法

slice()

• 作用：截取字符串

• 语法：slice(开始索引，结束索引)，

• 参数：

  • 包含开始索引，不会包含结束索引
  • 可以写负整数，表示 length + 负整数

• 返回值：截取出来的字符串

var str = 'hello';//         01234//使用substring 截取字符串var newStr = str.substring(1,-2);console.log(newStr);	//el

1. 从索引 [1] 开始，到索引 length + 负整数 截止，
2. length + 负整数 = 5+(-2) = [3]
3. 由于包含开始索引，不包结束索引
4. 所以得到的是 el

substr()

• 作用：截取字符串
• 语法：substr( 开始索引，截取多少个 )
• 参数：
• 返回值：截取出来的字符串

var str = 'hello';//         01234// 使用 substr 截取字符串var newStr = str.substr(1,3);console.log(newStr);	//ell

1. 从索引 [1] 开始 ，截取 3 个，
2. 索引 [1]位置是字符e，往后数 3 个
3. 所以得到的是 ell

substring()

• 作用：截取字符串
• 语法：substring(开始索引，结束索引)
• 参数：
  • 包含开始索引，不会包含结束索引
  • 只能写正整数
• 返回值：截取出来的字符串

var str = 'hello';//         01234//使用substring 截取字符串var newStr = str.substring(1,3);console.log(newStr);	//el

1. 从索引 [1] 开始，到索引 [3] 截止，
2. 由于包含开始索引，不包结束索引
3. 所以得到的是 el

查找方法

charAt()

• 作用：查找指定索引位置的字符
• 语法：array.charAt( 索引 )：
• 返回值：该索引位置的字符
  • 如果有该索引，就是索引位置字符串
  • 如果没有该索引，则返回空字符串
• 例如：

var str = 'hello world';var res1 = str.charAt(1);console.log(res1);	// evar res2 = str.charAt(100);console.log(res2);	//

1. 查找 字符串 str，索引位置为[1]的字符 e
2. 查找 字符串 str，索引位置为[100]的字符，由于找不到该索引，所以返回空字符串

indexOf()

• 作用：在字符串里面查找指定字符串片段

• 语法：array.indexOf('字符串片段',开始索引)：

• 参数：

  • 字符串片段不能为正则表达式

• 返回值：

  • 如果查询到了，就是指定索引
  • 如果没有，就是 -1

var str = 'abcaabbcc'var res1 = str.indexOf('a');console.log(res1);	// 0var res2 = str.indexOf('a',2);console.log(res2);	// 3var res1 = str.indexOf('aa');console.log(res1);	// 3var res4 = str.indexOf('ee');console.log(res4);	// -1

lastIndexOf()

• 作用：从后向前在字符串里面查找指定字符串片段
• 语法：array.lastIndexOf('字符串片段',开始索引)：
• 参数：
• 返回值：
  • 如果查询到了，就是指定索引
  • 如果没有，就是 -1

var str = 'abcaabbcc'var res1 = str.lastIndexOf('a');console.log(res1);	// 4var res2 = str.lastIndexOf('a',2);console.log(res2);	// 0var res3 = str.lastIndexOf('aa');console.log(res3);	// 3var res4 = str.lastIndexOf('ee');console.log(res4);	// -1

匹配方法

search()

• 作用：在字符串里面查找指定字符串片段
• 语法：array.search('字符串片段')：
• 参数：
  • 字符串片段可以为正则表达式
• 返回值：
  • 如果查询到了，就是指定索引
  • 如果没有，就是 -1

var str = 'hello world'var res1 = str.search('e');console.log(res1);	// 1var res2 = str.search('z');console.log(res2);	// -1var res3 = str.search('ll');console.log(res3);	// 2

match()

• 作用：找到字符串里面的字符串片段
• 语法：array.match('字符串片段')：
• 参数：
• 返回值：一个数组
  • 里面是找到的字符段片段
• 主要用来传递正则，不是传递字符串

var str = 'hello world'var res1 = str.march('o');console.log(res1);	// ['o',index:4,input:'hello world',groups:undefined]

包含方法

【ES6】includes()

• 作用：查找字符串里面是否包含指定字符串片段
• 语法：array.includes('字符串片段')：
• 参数：
• 返回值：布尔值
  • 有就是，true
  • 没有就是 false

var str = 'hello world'var res1 = str.includes('a');console.log(res1);	// falsevar res2 = str.includes('e');console.log(res2);	// truevar res3 = str.includes('ll');console.log(res3);	// true

【ES6】startsWith()

• 作用：判断该字符串是不是以这个字符串片段开始的
• 语法：array.startsWith('字符串片段')：
• 参数：
• 返回值：一个布尔值
  • 是就是，true
  • 不是就是，false

var str = 'hello world';var res1 = str.startsWith('hello');console.log(res1);	// truevar res2 = str.startsWith('world');console.log(res2);	// false

【ES6】endsWith()

• 作用：判断该字符串是不是以这个字符串片段结束的

• 语法：array.ecdsWith('字符串片段')：

• 参数：

• 返回值：一个布尔值

  • 是就是，true
  • 不是就是，false

var str = 'hello world';var res1 = str.startsWith('hello');console.log(res1);	// falsevar res2 = str.startsWith('world');console.log(res2);	// true

填充方法

【ES6】padStart()

• 作用：从前面补齐字符串
• 语法：array.padStart(目标长度,'填充字符串')
• 参数：
  • 目标长度，你想把字符串补充到多长
    • 如果小于字符串本身长度，就没有意义
    • 超过长度以后，用填充字符串补齐
  • 填充字符串，可以是一个字符
  • 多个的时候，如果超长，后面的就不要了
• 返回值：补齐以后的字符串

var str = '1234';var res1 = str.padStart(3,'a');console.log(res1);	// 1234var res2 = str.padStart(10,'a');console.log(res2);	// aaaaaa1234var res3 = str.padStart(6,'abcd');console.log(res3);	// ab1234

【ES6】padEnd()

• 作用：从后面补齐字符串补齐
• 语法：array.padEnd(目标长度,'填充字符串')
• 参数：
  • 目标长度，你想把字符串补充到多长
    • 如果小于字符串本身长度，就没有意义
    • 超过长度以后，用填充字符串补齐
  • 填充字符串，可以是一个字符
  • 多个的时候，如果超长，后面的就不要了
• 返回值：补齐以后的字符串

var str = '1234';var res1 = str.padStart(3,'a');console.log(res1);	// 1234var res2 = str.padStart(10,'a');console.log(res2);	// 1234aaaaaavar res3 = str.padStart(6,'abcd');console.log(res3);	// 1234ab

大小写转换方法

toLowerCase()

• 语法：array.toLowerCase()
• 参数：
• 作用：将字符串里面的大写字母转换成小写字母
• 返回值：转换好以后的字符串

var str = 'hello';//使用 toUpperCase 转换成大写var upper = str.toUpperCase();console.log(upper);	// HELLO

toUpperCase()

• 作用：将字符串里面的小写字母转换成大写字母
• 语法：array.toUpperCase()
• 参数：
• 返回值：转换好以后的字符串

var str = 'HELLO';//使用 toLowerCase 转换成小写var lower = upper.toLowerCase();console.log(lower);	//hello

toLocaleLowerCase()

• 与toLowerCase()用法一致
• 创造目的是为了在特地地区实现
• 比如：土耳其语的大小写转换

toLocaleUpperCase()

• 与toUpperCase()用法一致
• 可以额外在特地地区实现
• 比如：土耳其语的大小写转换

去除空格

trim()

• 作用：去除首尾的空格
• 语法：array.trim()：
• 参数：
• 返回值：去除空格以后的字符串

var str = '   hello world   ';var res = str.trim();console.log(str);	//    hello world   console.log(res);	// hello world

trimStart()【ES6】

• 作用：去除首部的空格
• 语法：array.trimStart()
• 参数：
• 返回值：去除空格以后的字符串
• 别名：trimLeft()作用效果一样

var str = '   hello world   ';var res = str.trimStart();console.log(str);	//    hello world   console.log(res);	// hello world

trimEnd()【ES6】

• 作用：去除尾部的空格
• 语法：array.trimEdm()：
• 参数：
• 返回值：去除空格以后的字符串
• 别名：trimRight()作用效果一样

var str = '   hello world   ';var res = str.trim();console.log(str);	//    hello world   console.log(res);	// 	  hello world

字符编码

normalize()【ES6】

许多欧洲语言有语调符号和重音符号。为了表示它们，Unicode 提供了两种方法。一种是直接提供带重音符号的字符，比如Ǒ（\u01D1）。另一种是提供合成符号（combining character），即原字符与重音符号的合成，两个字符合成一个字符，比如O（\u004F）和ˇ（\u030C）合成Ǒ（\u004F\u030C）。

这两种表示方法，在视觉和语义上都等价，但是 JavaScript 不能识别。

• 作用：指定的一种 Unicode 正规形式将当前字符串正规化
• 语法：array.normalize()：
• 参数：
  • NFC：默认参数，表示“标准等价合成”
  • NFD：表示“标准等价分解”
  • NFKC：表示“兼容等价合成”
  • NFKD：表示“兼容等价分解”
• 返回值：含有给定字符串的 Unicode 规范化形式的字符串

let string1 = '\u00F1';            // ñlet string2 = '\u006E\u0303';      // ñconsole.log(string1 === string2); // falseconsole.log(string1.length);      // 1console.log(string2.length);      // 2

let string1 = '\u00F1';           // ñlet string2 = '\u006E\u0303';     // ñstring1 = string1.normalize('NFD');string2 = string2.normalize('NFD');console.log(string1 === string2); // trueconsole.log(string1.length);      // 2console.log(string2.length);      // 2

charCodeAt()

• 作用：查找指定索引位置的字符编码
• 语法：array.charCodeAt( 索引 )
• 参数：
• 返回值：该索引位置的字符编码（UTF-8编码）

var str = 'hello world';var res1 = str.charCodeAt(1);console.log(res1);	// 101var res2 = str.charCodeAt(100);console.log(res2);	// ""

1. 查找 字符串 str，索引位置为[1]的字符 e 的UTF-8编码 101
2. 查找 字符串 str，索引位置为[100]的字符，由于找不到该索引，所以返回空字符串

codePointAt()【ES6】

• 作用：返回 一个 Unicode 编码点值的非负整数
• 语法：array.codePointAt(pos)：
• 参数：
• 返回值：
  • 返回值是在字符串中的给定索引的编码单元体现的数字
  • 如果在索引处没找到元素则返回 undefined 。

'ABC'.codePointAt(1);          // 66'\uD800\uDC00'.codePointAt(0); // 65536'XYZ'.codePointAt(42); // undefined

fromCharCode

• 作用：由指定的 UTF-16 代码单元序列创建的字符串。
• 语法：String.fromCharCode()：
  • 参数是一系列 UTF-16 代码单元的数字
  • 范围介于 0 到 65535（0xFFFF）之间
  • 大于 0xFFFF 的数字将被截断。
• 参数：
• 返回值：一个长度为 N 的字符串，由 N 个指定的 UTF-16 代码单元组成

String.fromCharCode(65, 66, 67);   // 返回 "ABC"String.fromCharCode(0x2014);       // 返回 "—"String.fromCharCode(0x12014);      // 也是返回 "—"; 数字 1 被剔除并忽略String.fromCharCode(8212);         // 也是返回 "—"; 8212 是 0x2014 的十进制表示

fromCodePoint【ES6】

• 作用：使用指定的代码点序列创建的字符串
• 语法：array.fromCodePoint()：
• 参数：一串 Unicode 编码位置，即“代码点”。
• 返回值：使用指定的 Unicode 编码位置创建的字符串。

console.log(String.fromCodePoint(9731, 9733, 9842, 0x2F804));	//  "☃★♲你"console.log(String.fromCodePoint(97, 98, 100, 101));	//  "abde"