美文网首页
第四章 字符串的扩展

第四章 字符串的扩展

作者: 曼珠沙华_521b | 来源:发表于2018-01-14 20:52 被阅读0次

ES6增强了对Uniconde的支持并且扩展了字符串对象。

4..1字符串Unicode表示法

lavaScript允许采用\uxxxx形式表示一个字符,其中xxxx表示字符的Unicode码点。
这种表示法只限于码点在\u0000---\uFFFF之间的字符。超出这个范围的字符,必须使用2个双字节的形式表达。

4.2codePOintAt()

javaScript 内部,字符以UTF-16的形式存储,每个字符固定两个字节,对于需要4个字节的存储字符,js会认为他们是2个字符。
ES6提供了codePOintAt()方法。能够正确处理4个字节的存储的字符,返回一个字符的码点。这是因为chart方法无法读取整个字节,charCodeAt()方法只能分别返回前两个字节和后两个字节的值。所以使用codePointAt();

var  s='吉a';
s.codePointAt(0)//134071
s.codePointAt(1)//57271
s.codePointAt(2)//97

codePointAt()方法返回的是码点是十进制值,如果需要16进制的,使用toString方法转换。

var s='吉a';
s.codePointAt(0).toString(16)//20bbb7
s.codePointAt(2).toString(16)//61

4.3String.fromcodePoint()

string.fromCharCode是由ES5提供的,但是不能是被32位的UTF-16的字符。
ES6提供了String.fromcodePoint(),可以识别大于0xFFFF的字符,在作用上,与codePoint相反。
fromCodePoint方法定义在string对象上,而codePointAt方法定义在字符串的实例对象上。

4.4字符串的遍历器接口

ES6为字符串添加了遍历器接口,是的字符串可以使用for ...of循环遍历。
其最大的优点是可以识别大于0xFFFF的码点,传统的for循环无法识别这样的码点。

4.5at()

ES5对字符串对象提供了chartAt方法,返回字符串给定位置的字符,该方法不能识别码点大于0xFFFF的字符。但at()可以。

4.6normalize()

ES6为字符串提供了normalize()方法,用来将字符的不同表示方法统一为同样的形式,称为Unicode正规化。
有四个参数可以传
NFC、NFD、NFKC、NFKD

4.7includes() /startsWith() /endsWith()

传统方法中只有indexOf方法可用来确定一个字符串是否包含在另一个字符串中,ES6有提供三种新方法
1.includes()返回布尔值,表示是否找到了参数字符串。
2.startsWith();返回布尔值,表示参数字符串是否存在源字符串的头部。
3.endsWith();返回布尔值,表示参数是否在源字符串的尾部。
这三个方法都支持第二个参数,表示的是开始搜素的位置。
使用第二个参数时,endsWith()的行为是针对前n个字符,不是往后找,是往前找。

4.8repeat();

repeat方法返回的是一个新的新字符串,表示将原字符串重复n次。
参数如果是小数的话,会被向下取整。
如果参数是负数或者infinity,会报错。
如果参数是0到-1之间的话,则等同于0.repeat视为0

'x'.repetat(2)//'xx'

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

4.9padStart()..padEnd()

ES2017引入了字符串补全长度的功能,如果某个字符串不够指定长度,会在头部或者尾部补全。
头部补全和尾部补全

'x'.padStart(5,'ab')//'ababx';头部补全
'x'.padEnd(4,'ab')//'abax';尾部补全
他们接受两个参数,第一个参数用来指定字符串的最小长度,第二个是用来补全的字符串。
如果原字符串的长度等于或者大于指定的最小长度,则返回原字符串。
'xxx'.padStart(2,'ab')//'xxx'
如果用来补全的字符串与原字符串的长度之和超过了指定的最小长度,则会截取超出位数的补全字符串。
如果省略第二个参数,则会用空格补全。

4.10模板字符串

传统的输出模板

$("#a").append(
'There are <b>'+value+'</b>'
)

ES6引入模板字符串解决问题。

$("#a").append(`
There are <b>${value}</b>`
)
用反引号标识。
如果代码中的字符串使用了反引号,如果在模板中需要使用反引号,则需要在前面使用反斜杠转义。
如果字符串表示的是多行字符,所有的空格和缩进搜会保留在输出中,这点要注意。

$("#a").html(`
<ul>
<li>one</li>
</ul>
`.trim())
因为所有的空格和换行都会保留,如果不想要换行,可以使用trim()方法取消。
使用变量的话,变量名写在${}中。大括号可以放任意的表达式。还能调用函数
如果模板中的变量没有声明的话,会报错。
若果里面是一个字符串的话,会原封不动的输出。
模板字符串还可以进行嵌套。

4.12标签模板

模板字符串的功能不仅仅是这些功能,他还可以紧跟在一个函数后面,该函数被调用来处理这个模板字符串,被称为“标签模板”功能。
标签模板其实不是模板,而是函数调用的一种特殊的形式,“标签”指的就是函数,紧跟在后面的模板字符串就是他的参数。但是,如果模板字符串有变量,就不是简单的调用了,而是将模板字符串先处理成多个参数,在调用函数。

4.13String.raw()

ES6为原生的string对象提供了一个raw()方法。
String.raw 方法用来充当模板字符出的处理函数,返回一个反斜线都被转义(就是反斜线前面加一个反斜线)的字符串,对应于替换变量后的模板字符串。

String .raw`Hi\n${2+3}!`   //"Hi\\5!"

如果原字符串中的反斜线已经转义,那么String.raw不会做任何处理。

相关文章

  • ES6扩展

    字符串扩展 正则扩展 数值扩展 函数扩展 对象扩展 数组扩展 字符串扩展 模版字符串 部分新的方法 padStar...

  • 2017-12-26es6-函数扩展

    扩展 1、字符串扩展 2、模板字符串 **** 3、数值扩展 4、函数扩展用于分页居多 rest 参数 ...变量...

  • es6第四章学习

    es6第四章学习 字符串的扩展 1.字符的 Unicode 表示法 ES6 加强了对 Unicode 的支持,允许...

  • ES6扩展

    字符串的扩展正则的扩展数值的扩展数组的扩展函数的扩展对象的扩展

  • Vue项目开发与规范--es6语法规范篇

    目录 简介 let const 解构赋值 正则的扩展 字符串的扩展 数值的扩展 数组的扩展 函数的扩展 对象的扩展...

  • JS基础系列(X): ES6入门

    字符串扩展 模板字符串模板字符串可以很方便的代替ES5字符串拼接,格式如下: 代码示例 API 函数扩展 函数默认...

  • ECMAScript 6 新增内容

    变量的扩展letconst变量的结构 字符串的扩展及新增方法模板字符串 (`${}`)matchAll 方法返回一...

  • ES6基础-ES6的扩展

    进行对字符串扩展,正则扩展,数值扩展,函数扩展,对象扩展,数组扩展。 开发环境准备: 编辑器(VS Code, A...

  • 十五、字符串转数字

    字符串转数组 字符串 *待扩展:传递与复制扩展 函数式编程和改变原始数据的编程方法

  • 字符串、数组、函数、对象

    字符串 多行字符串 字符串模板 数组 扩展 函数参数的扩展 类数组对象转数组 函数 默认值 以下两种写法的区别? ...

网友评论

      本文标题:第四章 字符串的扩展

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