博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES6 -- String 扩展方法解析
阅读量:6805 次
发布时间:2019-06-26

本文共 3356 字,大约阅读时间需要 11 分钟。

Unicode支持

Javascript允许采用\uxxxx的形式表示一个字符,但是这种表示仅限于/u0000 ~ /uFFFF之间。ES做出了改进,只要将码点放入大括号纠正正确解读

例子:

// ES5console.log('\u0071'); // q// ES6console.log('\u{71}'); // q复制代码

来个复杂一点的例子,ES6也能解读出来

let jquery = 'JQuery';// ES5console.log(jquery); // JQuery// ES6console.log(j\u{71}uery); // JQuery复制代码

上面的两个都能正常输入Jquery。

codePointAt() 方法

codePointAt()方法是返回char数组的给定索引上的十进制代码点(代码点是指可用于编码字符集的数字),接受一个参数,参数是字符串中的位置(从0开始)。

例子:

let name = '端coder';console.log(name.codePointAt(0)); // 31471console.log(name.codePointAt(0).toString(16)); //7aefconsole.log('\u7aef'); // 端复制代码

codePointAt方法在第一个字符上争取的识别了‘端’,并返回了它的十进制代码点31471。将他转换成16进制(用toString(16)方法转)后,反编译为汉字正确显示为‘端’。

codePointAt()方法能够正确判断一个字符是由两个字节还是4个字节组成。这也是弥补了charCodeAt和charAt的不足。

例子:

let temA = 't';console.log(temA.codePointAt(0) > 0xFFFF); // false        let temB = '?';console.log(temB.codePointAt(0) > 0xFFFF); // true复制代码

在写上面例子的时候发现下面的这个例子,即使是汉字也是输出false。

例子:

let temA = 't';console.log(temA.codePointAt(0) > 0xFFFF); // false        let temB = '端';console.log(temB.codePointAt(0) > 0xFFFF); // false复制代码

这是什么原因?我查了下原来汉字Unicode也分不同类型,例如上面的“?”属于扩展B,而“端”属于基本汉字。

下面附上Unicode中文表示范围,以供参考:

字符集 汉字 unicode编码
基本汉字 20902字 4E00-9FA5
基本汉字补充 38字 9FA6-9FCB
扩展A 6582字 3400-4DB5
扩展B 42711字 20000-2A6D6
扩展C 4149字 2A700-2B734
扩展D 222字 2B740-2B81D
康熙部首 214字 2F00-2FD5
部首扩展 115字 2E80-2EF3
兼容汉字 477字 F900-FAD9

fromCodePoint() 方法

fromCodePoint属于String对象的方法可以识别大于0xFFFF的字符,弥补了ES5fromCharCode的不足,在作用上又正好与codepointAt相反。

例子:

var temA = String.fromCodePoint(0x20164);console.log(temA); // ?var temB = String.fromCodePoint(0x20164, 0x7aef);console.log(temB); // ?端复制代码

如果String.fromCodePoint方法有多个参数,则会返回一个合并的字符串。

字符串的遍历器接口

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

例子:

let text = '我是王小端coder';for (let char of text){    console.log(char);}// 上面等同与下面for (let i = 0;i < text.length; i++){    console.log(text[i]);}// 上面两个等同于下面for (let i in text){    console.log(text[i]);}复制代码

includes() 方法

includes方法返回布尔值,是否找到了参数字符串。

例子:

let text = '我是王小端coder';console.log(text.includes('端c')); // trueconsole.log(text.includes('端d')); // false复制代码

startsWith() 方法

startsWith方法返回布尔值,参数字符串是否在原字符串的头部。

例子:

let text = '我是王小端coder';console.log(text.startsWith('我是')); // trueconsole.log(text.startsWith('小端')); // false复制代码

endsWith() 方法

endsWith方法返回布尔值,参数字符串是否在原字符串的尾部。

例子:

let text = '我是王小端coder';console.log(text.endsWith('coder')); // trueconsole.log(text.endsWith('小端')); // false复制代码

repeat() 方法

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

例子:

console.log('coder'.repeat(2)); // codercoderconsole.log('端'.repeat('3')); // 端端端复制代码

如果repeat的参数是负数或者Infinity,会报错,如果是字符串,会先转换成数字,如果遇到不是数字的字符则默认输入""。

raw() 方法

ES6 为String对象提供了一个raw方法,该方法用来充当模板字符串的处理函数,返回一个斜杠都被转义(即斜杠前面再加一个斜杠)的字符串,对应于替换变量后的模板字符串。如果原字符串的斜杠已经转义,那么String.raw会进行再次转义。

例子:

console.log(String.raw`王小端\ncoder`); // 王小端\ncoderconsole.log(String.raw`王小端\\ncoder`); // 王小端\\ncoder复制代码

raw方法也可以作为正常的函数使用。这时,它的第一个参数,应该是一个具有raw属性的对象,且raw属性的值应该是一个数组。

例子:

String.raw({ raw: 'test' }, 0, 1, 2); // 't0e1s2t'// 上面例子等同于String.raw({ raw: ['t','e','s','t'] }, 0, 1, 2);复制代码

作为函数,String.raw的代码实现基本如下:

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

对于字符串模板由于内容较多,平时也常用,我们下次单独写一篇,我这里不做讲解。

转载于:https://juejin.im/post/5ca306bbf265da30b53ec4d5

你可能感兴趣的文章
C# 获取屏幕的大小
查看>>
sass语法(1)
查看>>
react use simditor
查看>>
ARM——I2C
查看>>
垂直水平居中
查看>>
集合(二)栈和链表
查看>>
2-01模块分组,和主题
查看>>
转:深入了解bash与sh的区别
查看>>
WORD神操作!第一个技巧你就傻眼了!
查看>>
Linux shell编程学习笔记-----第六章变量和引用
查看>>
HTML标签小结
查看>>
滴滴算法大赛算法解决过程 - 方案设计
查看>>
写给要买Surface的各位兄弟
查看>>
汤姆大叔设计模式学习体会:设计模式的思想
查看>>
VS Code快捷键
查看>>
VUE 项目dependency was not found: * !!vue-style-loader!css-loader? 解决方案
查看>>
springmvc 自定义拦截器
查看>>
Linux中内存挂载到目录下
查看>>
【转】MyEclipse 9.0正式版官网下载(附Win+Llinux激活方法、汉化包)
查看>>
HDU 5794 - A Simple Chess
查看>>