美文网首页
ES6 字符串的扩展

ES6 字符串的扩展

作者: Kevin丶CK | 来源:发表于2019-03-20 17:12 被阅读0次

    ES6 加强了对 Unicode 的支持,并且扩展了字符串对象。
    (这块使用的不多,暂时就不做什么介绍,感兴趣的自己找点资料研究一下)

    1.字符串的遍历器

    ES6 为字符串添加了遍历器接口(Iterator),使得字符串可以被for...of循环遍历。

    for (let codePoint of 'hello') {
      console.log(codePoint)
    }
    // h  e   l  l  o
    

    2.includes(), startsWith(), endsWith()

    传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法:
    includes():返回布尔值,表示是否找到了参数字符串。
    startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
    endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
    这三个方法都支持第二个参数,表示开始搜索的位置。

         let s = 'Hello world!';
        console.log(s.startsWith('Hello',0)); // true
        console.log(s.startsWith('Hello',4)); // false
        console.log(s.endsWith('!',12)); // true
        console.log(s.endsWith('!',0)); // false
        console.log(s.includes('o',7)); // true
        console.log(s.indexOf('wo'));//6
    

    上面代码表示,使用第二个参数n时,endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。

    3.repeat()

    repeat方法返回一个新字符串,表示将原字符串重复n次。

        console.log('hello'.repeat(2)); // "hellohello"
    

    4.padStart(),padEnd()

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

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

    如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串。
    如果省略第二个参数,默认使用空格补全长度。

       console.log('x'.padStart(4)); // '   x'
       console.log('x'.padEnd(4)); // 'x   '
    

    5.matchAll()

    matchAll方法返回一个正则表达式在当前字符串的所有匹配

    6.模板字符串

    模板字符串(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!`;
    

    上面代码中的模板字符串,都是用反引号表示。如果在模板字符串中需要使用反引号,则前面要用反斜杠转义。模板字符串中嵌入变量,需要将变量名写在${}之中。大括号内部可以放入任意的 JavaScript 表达式,可以进行运算,以及引用对象属性。
    如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中,可以使用trim方法消除。

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

    模板字符串之中还能调用函数。如果大括号中的值不是字符串,将按照一般的规则转为字符串。比如,大括号中是一个对象,将默认调用对象的toString方法。

    7.标签模板

    模板字符串可以紧跟在一个函数名后面,该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能(tagged template)。

    console.log`aaaaa`;
    console.log('aaaaa');
    

    模板字符里面有变量,就不是简单的调用了,而是会将模板字符串先处理成多个参数,再调用函数。

    let a = 5;
    let b = 10;
    
    tag`Hello ${ a + b } world ${ a * b }`;
    // 等同于
    tag(['Hello ', ' world ', ''], 15, 50);
    

    tag函数的第一个参数是一个数组,该数组的成员是模板字符串中那些没有变量替换的部分,也就是说,变量替换只发生在数组的第一个成员与第二个成员之间、第二个成员与第三个成员之间,以此类推。
    tag函数的其他参数,都是模板字符串各个变量被替换后的值。由于本例中,模板字符串含有两个变量,因此tag会接受到value1和value2两个参数。
    tag函数所有参数的实际值如下:
    第一个参数:['Hello ', ' world ', '']
    第二个参数: 15
    第三个参数:50

    8.String.raw()

    String.raw方法,往往用来充当模板字符串的处理函数,返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,对应于替换变量后的模板字符串。

    console.log(String.raw`Hi\n${2+3}!`);//Hi\n5!
    

    相关文章

      网友评论

          本文标题:ES6 字符串的扩展

          本文链接:https://www.haomeiwen.com/subject/kjftvqtx.html