美文网首页
es6-字符串的扩展

es6-字符串的扩展

作者: 前端的爬行之旅 | 来源:发表于2018-09-05 15:51 被阅读13次

    1. indexOf === includes(), endsWith(), startsWith()

    • includes():返回布尔值,表示是否找到了参数字符串。
    • startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
    • endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
    let s = 'Hello world!';
    
    s.startsWith('Hello') // true
    s.endsWith('!') // true
    s.includes('o') // true
    

    这三个方法都支持第二个参数,表示开始搜索的位置。

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

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

    2.repeat()

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

    'x'.repeat(3) // "xxx"
    'hello'.repeat(2) // "hellohello"
    'na'.repeat(0) // ""
    

    参数如果是小数,会被取整。

    'na'.repeat(2.9) // "nana"
    

    如果repeat的参数是负数或者Infinity,会报错。

    'na'.repeat(Infinity)
    // RangeError
    'na'.repeat(-1)
    // RangeError
    

    但是,如果参数是 0 到-1 之间的小数,则等同于 0,这是因为会先进行取整运算。0 到-1 之间的小数,取整以后等于-0,repeat视同为 0。

    'na'.repeat(-0.9) // ""
    

    参数NaN等同于 0。

    'na'.repeat(NaN) // ""
    

    如果repeat的参数是字符串,则会先转换成数字。

    'na'.repeat('na') // ""
    'na'.repeat('3') // "nanana"
    

    3.padStart(),padEnd()

    padStart()用于头部补全,padEnd()用于尾部补全。
    默认为两个参数,第一个参数:字符串的长度,部位字符,默认为空。

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

    如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串。

    3.模版字符串

    // 字符串中嵌入变量
    let name = "Bob", time = "today";
    `Hello ${name}, how are you ${time}?`
    

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

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

    上面代码中,所有模板字符串的空格和换行,都是被保留的,比如<ul>标签前面会有一个换行。如果你不想要这个换行,可以使用trim方法消除它。

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

    相关文章

      网友评论

          本文标题:es6-字符串的扩展

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