【ES6】字符串的拓展

简介: 【ES6】字符串的拓展
引言:ES6加强了对Unicode的支持,并拓展了字符串对象。

一、为什么ES6要进行字符拓展?


   一般地,在JavaScript中,字符以UTF-16的格式储存,每个字符固定为2个字节,也就是一个字。一个字的范围是0x0000-0xFFFF(16进制)。例如字符a就是一个字符,含有2个字节,它的16进制码为0x0061

JS中,允许采用\uxxxx的形式来表示一个字符,其中xxxx就是该字符的16进制值。

       我们知道,一个字的表示范围是0x0000-0xFFFF,当我们想表示大于0xFFFF的字符的时候,例如:

var a="\u20bb7";  //0x20bb7>0xffff
console.log(a);  // 7

     出现以上输出7的情况是因为,JS中,以"\uxxxx"为一个字符读取,所以"\u20bb7"被读取成了"\u20bb"+“7"这两个字符,因为在JS中,”\u20bb"不可打印,所以a只打印出来了7,事实上,变量a已经是拥有2个字符的字符串了。

var b="\uD842\uDFB7";  //"\uD842\uDFB7"的码值与"\u20bb7"等价
console.log(a);  // 𠮷

  要想显示\u20bb7的字符,在JS中,只能用等价的"\uD842\uDFB7"来表示。如上面的代码所示。

var b="\u{20bb7}";  //"\uD842\uDFB7"的码值与"\u20bb7"等价
console.log(a);  // 𠮷

为了简便的显示2个字的字符,ES6语法增加了"\u{xxxxx}",即字符串的拓展。

二、ASCLL码、Unicode编码、UTF-8编码的异同


请参考博文:

ASCII,Unicode和UTF-8终于找到一个能完全搞清楚的文章了

三、ES6新增的字符串接口


1)codePointAt()


       原生JScharCodeAt只能识别小于0xFFFF的字符。

var s="𠮷"; // s="\uD842\uDFB7"; 含有2个字符; 也可以理解为,1个中文字含2个单位英文字
s.length // 2
s.charAt(0) // ''
s.charAt(1) // ''
s.charCodeAt(0) // 十进制:55362
s.charCodeAt(1) // 十进制:57271

    为了弥补以上原生JS字符串接口的缺陷,ES6提供了codePointAt方法,能够正确处理4个字符存储的字符即大于0xFFFF,返回一个字符的码点。

var s="𠮷a"; // s="\uD842\uDFB7\u0061"; 含有3个字符; 
s.length // 3
s.codePointAt(0) // 十进制:134071
s.codePointAt(1) // 十进制:57271
s.codePointAt(2) // 十进制:97

   理解为,codePointAt接口读取字符时,向下读一位,如果连贯的话(是中文字符或者说前后两个字符是连续的),那么输出连续两个的十进制码值,否则输出1个字符的十进制码值。

2)codePointAt()


       ES5String.fromCharCode()方法不能识别32位的UTF-16字符(Unicode编号大于0xFFFF)。

       ES6提供Sting.fromCodePoint()方法可以识别大于0xFFFF

String.fromCharCode(0x20bb7); // 乱码
Sting.fromCodePoint(0x20bb7); // 𠮷

3)includes(),startsWith(),endsWith()


  • Str.includes(ss,flag):返回布尔值,表示从第flag位置起是否找到了参数字符串ss
  • Str.startsWith(ss,flag):返回布尔值,表示第flag位置起参数字符串ss是否在源字符串Str的头部
  • Str.endsWith(ss,flag):返回布尔值,表示第flag位置起参数字符串ss是否在源字符串Str的尾部

4)repeat()


       repeat方法返回一个字符串,表示将源字符串重复几次。

  'x'.repeat(3); // "xxx"
  'na'.repeat(0); // ""
  'na'.repeat(2.9); //"nana" 小数会取整
  'na'.repeat(-1);  // Error
  'na'.repeat(Infinity); // Error
  'na'.repeat(-0.9); // -1~0之间的数视为0 
  'na'.repeat('num2'); //"nana" 字符串会转化为数字
  'na'.repeat('num');  // ""

5)padStart(),padEnd()


  • Str.padStart(num,ss):对于字符源字符串Str,如果Str的长度小于num,那么在Str的头部添加依次字符串ss至Str的长度为num
  • Str.padEnd(num,ss):同理

6)字符串的遍历器接口


var Str='hello\u{20bb7}';
for(let codePoint of Str){
  console.log(codePoint);
}
// "h"
// "e"
// "l"
// "l"
// "o"
// "𠮷"

这个最大的优点是可以同时识别中文字符,对中文数据分析、爬虫比较实用。

7)模板字符串


       个人觉得,这个模板字符串只是作为ES6的发行测试版本,应用场景和使用技术都不大成熟,而且稍微优点复杂。不如直接用Vue里面的template。

       感兴趣的可以去网上查查相关资料:ES6模板字符串、ES6模板编译、ES6标签模板。

查看更多ES6教学文章:


1. 【ES6】let与const 详解

2. 【ES6】变量的解构赋值

3. 【ES6】字符串的拓展

4. 【ES6】正则表达式的拓展

5. 【ES6】数值的拓展

6. 【ES6】数组的拓展

7. 【ES6】函数的拓展

8. 【ES6】对象的拓展

9. 【ES6】JS第7种数据类型:Symbol

10. 【ES6】Proxy对象

11. 【ES6】JS的Set和Map数据结构

12. 【ES6】Generator函数详解

13. 【ES6】Promise对象详解

14. 【ES6】异步操作和async函数

15. 【ES6】JS类的用法class

16. 【ES6】Module模块详解

17. 【ES6】ES6编程规范 编程风格

参考文献


阮一峰 《ES6标准入门(第2版)》

相关文章
|
6月前
|
JSON 自然语言处理 JavaScript
ES6 字符串的扩展
ES6 字符串的扩展
|
2月前
|
自然语言处理 JavaScript 前端开发
ES6 函数及拓展
ES6 函数及拓展
108 58
|
6月前
|
Serverless 网络架构
ES6学习笔记--函数与数组的拓展
ES6学习笔记--函数与数组的拓展
|
6月前
|
JavaScript 前端开发 API
ES6学习笔记--字符串与数值的拓展
ES6学习笔记--字符串与数值的拓展
|
自然语言处理 JavaScript 前端开发
ES6(字符串的扩展)
ES6(字符串的扩展)
93 0
|
11月前
ES6学习(三)—字符串的扩展
ES6学习(三)—字符串的扩展
ES6: 字符串与数值拓展
ES6: 字符串与数值拓展
46 0
【ES6】字符串新增拓展
【ES6】字符串新增拓展
73 0
【ES6】对象相关拓展
【ES6】对象相关拓展
42 0
|
JavaScript 安全 前端开发
【ES6】数值的拓展
【ES6】数值的拓展
【ES6】数值的拓展