ECMAScript6官方文档学习笔记（三）----字符串的扩展

快来打我* 2023-05-30 04:57 14阅读 0赞

# 字符的遍历器接口 #

ES6 为字符串添加了遍历器接口（详见《Iterator》一章），使得字符串可以被for…of循环遍历。

for (let codePoint of 'foo') {
      console.log(codePoint)
    }
    // "f"
    // "o"
    // "o"

# 模板字符串 #

模板字符串（template string）是增强版的字符串，用反引号（\`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

// 普通字符串
    `In JavaScript '\n' is a line-feed.`
    
    // 多行字符串
    `In JavaScript this is
     not legal.`
    
    console.log(`string text line 1
    string text line 2`);
    
    // 字符串中嵌入变量
    let name = "Bob", time = "today";
    `Hello ${name}, how are you ${time}?`

上面代码中的模板字符串，都是用反引号表示。如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。

let greeting = `\`Yo\` World!`;

如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。

$('#list').html(`
    <ul>
      <li>first</li>
      <li>second</li>
    </ul>
    `);

上面代码中，所有模板字符串的空格和换行，都是被保留的，比如

*  标签前面会有一个换行。如果你不想要这个换行，可以使用trim方法消除它。

$('#list').html(`
    <ul>
      <li>first</li>
      <li>second</li>
    </ul>
    `.trim());

大括号内部可以放入任意的 JavaScript 表达式，可以进行运算，以及引用对象属性。

模板字符串之中还能调用函数。

function fn() {
      return "Hello World";
    }
    
    `foo ${fn()} bar`
    // foo Hello World bar

如果需要引用模板字符串本身，在需要时执行，可以写成函数。

let func = (name) => `Hello ${name}!`;
    func('Jack') // "Hello Jack!"

# 标签模板 #

模板字符串的功能，不仅仅是上面这些。它可以紧跟在一个函数名后面，该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能（tagged template）。

alert`123`
    // 等同于
    alert(123)

# 字符串的新增方法 #

**String.fromCodePoint()**:  
ES5 提供String.fromCharCode()方法，用于从 Unicode 码点返回对应字符，但是这个方法不能识别码点大于0xFFFF的字符。

**String.raw()**:  
ES6 还为原生的 String 对象，提供了一个raw()方法。该方法返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串，往往用于模板字符串的处理方法。

String.raw`Hi\n${2+3}!`
    // 实际返回 "Hi\\n5!"，显示的是转义后的结果 "Hi\n5!"
    
    String.raw`Hi\u000A!`;
    // 实际返回 "Hi\\u000A!"，显示的是转义后的结果 "Hi\u000A!"

**codePointAt()**:  
JavaScript 内部，字符以 UTF-16 的格式储存，每个字符固定为2个字节。对于那些需要4个字节储存的字符（Unicode 码点大于0xFFFF的字符），JavaScript 会认为它们是两个字符。  
ES6 提供了codePointAt()方法，能够正确处理 4 个字节储存的字符，返回一个字符的码点。

**includes()**：返回布尔值，表示是否找到了参数字符串。  
**startsWith()**：返回布尔值，表示参数字符串是否在原字符串的头部。  
**endsWith()**：返回布尔值，表示参数字符串是否在原字符串的尾部。  
**repeat()**:返回一个新字符串，表示将原字符串重复n次

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。\*\*padStart()\*\*用于头部补全，\*\*padEnd()\*\*用于尾部补全。

'x'.padStart(5, 'ab') // 'ababx'
    'x'.padStart(4, 'ab') // 'abax'
    
    'x'.padEnd(5, 'ab') // 'xabab'
    'x'.padEnd(4, 'ab') // 'xaba'

ES2019 对字符串实例新增了\*\*trimStart()**和**trimEnd()\*\*这两个方法。它们的行为与trim()一致，\*\*trimStart()\*\*消除字符串头部的空格，\*\*trimEnd()\*\*消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。

**matchAll()**:返回一个正则表达式在当前字符串的所有匹配