ES（三）字符串的扩展及新增方法

红太狼 2022-11-28 13:29 181阅读 0赞

# 3、字符串的扩展及新增方法 #

*  [1、 字符串的遍历器接口][1_]
 *  [2、模板字符串][2]
 *  [3、新增的方法][3]

--------------------

#### [\#][Link 1]一、字符串新增了遍历器接口 ####

字符串新增了遍历器接口 《Interator》, 使得字符串可以被 for…of 循环遍历。

for (let ererycode of "foo") { 
      console.log(ererycode);
    }
    // "f"
    // "o"
    // "o"

#### [\#][Link 2]二、新增了模版字符串 ####

传统的 Javascript 中，输出模版通常是下面写法

$(#result).append(
      'There are <b>'+basket.count+'</b>'+
      '<em>'+basket.data+'</em>'
    )

非常的繁琐,新增模版字符串

$(#result).append(
      `There are <b>${ basket.count}</b> <em>${ basket.data}</em>`
    )
    // 普通字符串
    `in javascript '\n' a line-feed.`// 多行字符串
    `in javascript a line-feed.`;
    // 嵌入变量
    const data = {  a: 1 }`this is ${ data.a}`;
    // 摸板字符串中如果需要使用反引号，需要加 "\"
    let greeting = `\`Yo\` World`;
    // 摸板字符串的空格和换行都会保留，可以用trim方法消除
    $("#list").html(
      ` <ul> <li>first</li> <li>second</li> </ul> `.trim()
    );
    // 模版字符串中的括号内。可以变量可以运算，甚至调用函数

标签模版

alert`hello`
    // 等同于
    alert(['hello'])
    
    console.log`1 12 33`
    ["1 12 33", raw: Array(1)]

应用

“标签模板”的一个重要应用，就是过滤 HTML 字符串，防止用户输入恶意内容。

上面的代码通过 jsx 函数，将一个 DOM 字符串转为 React 对象。你可以在 GitHub 找到 jsx 函数的[具体实现][Link 3]。

jsx` <div> <input ref='input' onChange='${ this.handleChange}' defaultValue='${ this.state.value}' /> ${ this.state.value} </div> `;

#### [\#][Link 4]三、新增的字符串方法 ####

##### [\#][Link 5]1. 实例方法：includes(), startsWith() , endsWith() #####

传统 JavaScript 只有 indexof 方法，；来判断一个字符串是否包含在另一个字符串中，现在 ES6 又提供了三种新方法。

*  includes(): 返回参数字符串
 *  startsWith(): 返回布尔，表示参数字符串是否在原子符的头部
 *  endsWith(): 返回布尔值，表示字符串是否在原字符的尾部。

这三个方法都支持第二个参数，表示从弟 n 个开始搜索的位置。`endsWith`的行为与其他两个方法有所不同。它针对前`n`个字符

let s = "Hello world!";
    
    s.startsWith("world", 6); // true
    s.endsWith("Hello ", 6); // true
    s.includes("Hello", 6); // false

##### [\#][Link 6]2. 实例方法：repeat() #####

`repeat`方法返回一个新的字符串，表示将原来的字符串重复了 n 次

"hello ".repeat(2); // "hello hello "

##### [\#][Link 7]3. 实例方法：padStart(),padEnd() #####

ES2017 中引入了字符串补全功能，如果字符串长度不够指定长度，会在头部或者尾部补全

"x".padStart(4, "ab"); // abax
    
    "x".padEnd(4, "ab"); // xaba

常见用法

(1) 为数值补全指定位数
    '12'.padStart(10,'0')  // 0000000012
    (2) 提示字符串格式
    '09-12'.padStart(10,'YYYY-MM-DD') // "YYYY-09-12"

##### [\#][Link 8]4.实例方法：trimStart()，trimEnd() #####

ES2019 对字符串新增了`trimStart()`和`trimEnd` 他们的行为和 trim()一致，前者消除字符串头部空格，后者消除字符串尾部空格，返回的都是新的字符串，不会修改原始字符串。对尾部的 tab 和换行符也有效

const s = ' abc ';
    s.trim()       // 'abc'
    s.trimStart()  // 'abc '
    s.trimEnd()    // ' abc'
    
    结合repeat()使用
    const str = "hello "
    str.repeat(3).trimEnd() // "hello hello hello"

[1_]: https://s2265681.github.io/Guide/Es6/3%E3%80%81%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E6%89%A9%E5%B1%95.html#one
[2]: https://s2265681.github.io/Guide/Es6/3%E3%80%81%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E6%89%A9%E5%B1%95.html#two
[3]: https://s2265681.github.io/Guide/Es6/3%E3%80%81%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E6%89%A9%E5%B1%95.html#three
[Link 1]: https://s2265681.github.io/Guide/Es6/3%E3%80%81%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E6%89%A9%E5%B1%95.html#%E4%B8%80%E3%80%81%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%96%B0%E5%A2%9E%E4%BA%86%E9%81%8D%E5%8E%86%E5%99%A8%E6%8E%A5%E5%8F%A3
[Link 2]: https://s2265681.github.io/Guide/Es6/3%E3%80%81%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E6%89%A9%E5%B1%95.html#%E4%BA%8C%E3%80%81%E6%96%B0%E5%A2%9E%E4%BA%86%E6%A8%A1%E7%89%88%E5%AD%97%E7%AC%A6%E4%B8%B2
[Link 3]: https://gist.github.com/lygaret/a68220defa69174bdec5
[Link 4]: https://s2265681.github.io/Guide/Es6/3%E3%80%81%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E6%89%A9%E5%B1%95.html#%E4%B8%89%E3%80%81%E6%96%B0%E5%A2%9E%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%96%B9%E6%B3%95
[Link 5]: https://s2265681.github.io/Guide/Es6/3%E3%80%81%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E6%89%A9%E5%B1%95.html#_1-%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95%EF%BC%9Aincludes-startswith-endswith
[Link 6]: https://s2265681.github.io/Guide/Es6/3%E3%80%81%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E6%89%A9%E5%B1%95.html#_2-%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95%EF%BC%9Arepeat
[Link 7]: https://s2265681.github.io/Guide/Es6/3%E3%80%81%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E6%89%A9%E5%B1%95.html#_3-%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95%EF%BC%9Apadstart-padend
[Link 8]: https://s2265681.github.io/Guide/Es6/3%E3%80%81%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E6%89%A9%E5%B1%95.html#_4-%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95%EF%BC%9Atrimstart-%EF%BC%8Ctrimend