美文网首页
5.字符串的新增方法

5.字符串的新增方法

作者: 如果俞天阳会飞 | 来源:发表于2019-05-23 17:14 被阅读0次

    来源:http://es6.ruanyifeng.com/?search=keys&x=0&y=0#docs/string-methods

    1. String.fromCodePoint()
    2. String.raw()
    3. 实例方法:codePointAt()
    4. 实例方法:normalize()
    5. 实例方法:includes(), startsWith(), endsWith()
    6. 实例方法:repeat()
    7. 实例方法:padStart(),padEnd()
    8. 实例方法:trimStart(),trimEnd()
    9. 实例方法:matchAll()

    1.String.fromCodePoint()

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

    String.fromCharCode(0x20BB7)
    // "ஷ"
    

    上面代码中,String.fromCharCode()不能识别大于0xFFFF的码点,所以0x20BB7就发生了溢出,最高位2被舍弃了,最后返回码点U+0BB7对应的字符,而不是码点U+20BB7对应的字符。

    ES6 提供了String.fromCodePoint()方法,可以识别大于0xFFFF的字符,弥补了String.fromCharCode()方法的不足。在作用上,正好与下面的codePointAt()方法相反。

    String.fromCodePoint(0x20BB7)
    // "𠮷"
    String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'
    // true
    

    上面代码中,如果String.fromCodePoint方法有多个参数,则它们会被合并成一个字符串返回。

    注意,fromCodePoint方法定义在String对象上,而codePointAt方法定义在字符串的实例对象上。

    3.实例方法:codePointAt()

    js内部,字符以UTF-16的格式存储,每个字符固定为2个字节,对于那些需要4个字节储存的字符(Unicode 码点大于0xFFFF的字符),JavaScript 会认为它们是两个字符。

    var s = "𠮷";
    
    s.length // 2
    s.charAt(0) // ''
    s.charAt(1) // ''
    s.charCodeAt(0) // 55362
    s.charCodeAt(1) // 57271
    

    5.实例方法: includes() , startsWith(), endWith()

    includes():返回布尔值,表示是否找到了参数字符串。
    startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
    endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。

    let s = 'Hello world!';
    
    s.startsWith('Hello') // true
    s.endsWith('!') // true
    

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

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

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

    6.实例方法 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) // ""
    'na'.repeat(NaN) // ""
    如果repeat的参数是字符串,则会先转换成数字。
    'na'.repeat('na') // ""
    'na'.repeat('3') // "nanana"
    

    7.实例方法 padStart() padEnd()

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

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

    上面的代码中padStart() 和padEnd() 一共接收两个参数,第一个参数是字符串补全生效的最大长度,第二个参数hi用来补全的字符串
    如果原字符串的长度,等于或大于最大长度,则字符串补全不生效,返回原字符串

    'xxx'.padStart(2, 'ab') // 'xxx'
    'xxx'.padEnd(2, 'ab') // 'xxx'
    

    如果用来补全的字符串与原字符串,两者的长度之和超过了最大长度,则会截去超出位数的补全字符串。

    'abc'.padStart(10, '0123456789')
    // '0123456abc'
    如果省略第二个参数,默认使用空格补全长度。
    'x'.padStart(4) // '   x'
    'x'.padEnd(4) // 'x   '
    padStart()的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。
    '1'.padStart(10, '0') // "0000000001"
    '12'.padStart(10, '0') // "0000000012"
    '123456'.padStart(10, '0') // "0000123456"
    另一个用途是提示字符串格式。
    '12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
    '09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
    
    

    8.实例方法:trimStrt() trimEnd()

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

    const s = '  abc  ';
    
    s.trim() // "abc"
    s.trimStart() // "abc  "
    s.trimEnd() // "  abc"
    

    上面代码中,trimStart()只消除头部的空格,保留尾部的空格。trimEnd()也是类似行为。

    除了空格键,这两个方法对字符串头部(或尾部)的 tab 键、换行符等不可见的空白符号也有效。

    浏览器还部署了额外的两个方法,trimLeft()是trimStart()的别名,trimRight()是trimEnd()的别名。

    相关文章

      网友评论

          本文标题:5.字符串的新增方法

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