ES6 学习笔记(3) 字符串扩展

2018-03-02  本文已影响0人  MrZhou_b216

1. 字符串的Unicode表示方法

javaScript允许采用\uxxxx形式表示字符串, xxxx表示字符的unicode码点
这种表示法只限于\u0000 --\uFFFF之间的字符, 超出这个范围必须使用双字节

  '\u0061'  // a
  '\uD847\uDFB7'  // '吉'

es6对超过码点进行的改进,只需将码点放入大括号就能正确读解该字符

  '\u{1F680}' === '\uD83D\uDE80'
  // true

有了这之后JavaScript有六种方法表示一个字符

  '\z' === 'z'  // true
  '\172' === 'z' // true
  '\x7A' === 'z' // true
  '\u007A' === 'z' // true
  '\u{7A}' === 'z' // true

2. codePoinAt()

JavaScript内部,字符已UTF-16的格式存储,每个字符固定为2个字节,.对于那些需要4个字节存储的的字符(unicode码点大于0xFFFF),会认为他们是两个字符 。
codPoinAt能够正确处理4个字节存储的字符返回一个字符的码点

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

  s.codePointAt(0)  //134071
  s.codePoinAt(1)  //57271

总之，codePointAt方法会正确返回 32 位的 UTF-16 字符的码点。对于那些两个字节储存的常规字符，它的返回结果与charCodeAt方法相同。

codePointAt方法返回的是码点的十进制值，如果想要十六进制的值，可以使用toString方法转换一下。

  let s = '𠮷a';
  s.codePointAt(0).toString(16) // "20bb7"
  s.codePointAt(2).toString(16) // "61"

codePointAt方法是测试一个字符是由两个字节还是四个字节组成的最简单的方法

3. String.fromCodePoint()

ES5中String.fromcharCode方法用于从码点返回对应字符,但是不能识别32位的UTF-16字符(unicode编号大于0xFFFF).

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

ES6 提供了String.fromCodePoin放大可识别大于0xFFFF的字符 作用上与codePionAt相反

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

4. 字符串遍历接口

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

  for (let code in 'foo') {
    console.log(code)  //  'f' 'o' 'o'
  }

5. at()

ES5 提供了chartAt方法,返回字符串的给定位置的字符 该方法不能识别码点大于0xFFFF的字符
目前，有一个提案，提出字符串实例的at方法，可以识别 Unicode 编号大于0xFFFF的字符，返回正确的字符。

6. normalize()

normalize方法可以接受一个参数来指定normalize的方式，参数的四个可选值如下。

7. includes() , startsWith() , endsWith()

  let s = 'hello' ;
  s.startsWith('h')  // true
  s.endsWith('o')  // true
  s.includes('ll' , 0)    // true

8. repeat()

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

  'x'.repeat(3)  // 'xxx'
  // 参数如果是小数,会被取整
   'x'.repeat(2.9)  // 'xxx'
  // 参数如果是负数,或者```Infinity```,会报错
   'x'.repeat(Infinity)  //  Error
  // 0-1之间的小数  和 NaN 等同于0 
  // 参数是字符串则会先转换成数字
  'na'.repeat('na')  // ''
  'na'.repea('3')   // 'nanana'

9. padStart() , padEnd()

ES8 引入了字符串全长度补全功能.padStart()补全头部,padEnd()补全尾部

  'x'.padStart(6 , 'abc')   // 'abcabx'
  'x'.padEnd(6, 'abc')     // 'xabcab'
  // 第一个参数为最小长度, 第二个为补全的字符串
  // 如果原字符串的长度 等于或大于指定的最小长度,则返回原字符串
  `xxx`.padStart(2 , 'a')  //  'xxx'
  // 如果原字符串和补全字符串的长度之和超过制定最小长度,则会截去补全字符串超出的位数
  'xxxxxx'.padEnd(10,'aaaaaaaa')  // 'xxxxxxaaaa'
  // 如果省略第二个参数, 默认使用空格补全长度
  'a'.padStart(5)  // '    a'

常见用途

  // 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"

10. matchAll()

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

11. 模板字符串

  // 普通字符串
  `In JavaScript `\n` is a line-feed`
  // 多行模板字符串
  ` In JavaScript 
     is a line-feed `
  console.log(`string text line 1 
               string text line 2`);
  // 字符串中嵌入变量
  // 模板字符串中嵌入变量，需要将变量名写在${}之中。
  let name = "Bob", time = "today";
  `Hello ${name}, how are you ${time}?`

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

12. [模板编译] (http://es6.ruanyifeng.com/#docs/string)

13. [标签模板] (http://es6.ruanyifeng.com/#docs/string)

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

14. String.raw()

  String.raw`Hi\n${2+3}!`;
  // 返回 "Hi\\n5!"

  String.raw`Hi\u000A!`;
  // 返回 "Hi\\u000A!"

  String.raw`Hi\\n`
  // 返回 "Hi\\\\n"

  String.raw({ raw: 'test' }, 0, 1, 2);
  // 't0e1s2t'

  // 等同于
  String.raw({ raw: ['t','e','s','t'] }, 0, 1, 2);

String.raw = function ( String , ...values) {
  let output = ''  ;
  let index 
  for (index = 0 ;index < values.length ;index++) {
    optput += strings.raw[index] + values[index]; 
  }
  output += strings.raw[index]
  return output
}

15. 模板字符串的限制

\u和\x在 LaTEX 里面有特殊含义，但是 JavaScript 将它们转义了。
ES2018 放松了对标签模板里面的字符串转义的限制。如果遇到不合法的字符串转义，就返回undefined，而不是报错，并且从raw属性上面可以得到原始字符串。
这种对字符串转义的放松，只在标签模板解析字符串时生效，不是标签模板的场合，依然会报错。

上一篇下一篇

猜你喜欢

热点阅读