ES6入门之字符串的扩展
栏目: JavaScript · 发布时间: 5年前
内容简介:Javascript 中允许采用 uxxxx的形式表示一个字符,其中xxxx表示字符的Unicode码点。如下这种 表示有区间 只能在 0000 ~ FFFF之间,如果超出则需要用双字节的的形式表示
1. 字符的 Unicode 表示法
Javascript 中允许采用 uxxxx的形式表示一个字符,其中xxxx表示字符的Unicode码点。如下
"\u0061"
这种 表示有区间 只能在 0000 ~ FFFF之间,如果超出则需要用双字节的的形式表示
"\u20BB7\uDFB1"
在ES6中,对字符串的写法做出了改变。改为将码点放入大括号中,就能正确读取该字符,如下:
"\u{20BB7}" // 吉
2. codePointAt()
Javascript内部,字符以 UTF-16的格式存储,每个字符固定为2个字节。对于需要4个字节储存的字符,JavaScript会认为它们是两个字符。如下:
var s = "吉" s.length // 2 s.charAt(0) // '' s.charAt(1) // '' s.charCodeAt(0) // 55362 s.charCodeAt(1) // 57271
上面代码中汉字吉 需要4个字节存储,但是JavaScript不能正确处理,字符串长度误判为2,而且charAt 方法无法读取字符,charCodeAt 只能返回前面两个字节和后面两个字节的值,ES6 提供了 codePointAt 方法能够正确处理4个字节存储的字符,返回一个字符的码点,如下:
let s = '吉a'; s.codePointAt(0) // 134071 s.codePointAt(1) // 57271
codePointAt() 方法是测试一个字符由两个字节还是四个字节组成的最简单的方法
3. String.fromCodePoint()
ES5 提供了 String.fromCharCode 方法 用于从码点返回对应字符,但是不能识别32位的UTR-16字符,ES6提供了 Sring.fromCodePoint() 方法 可以识别大于32位的。如果有多个参数则将合并。如下:
String.fromCodePoint(0x20BB7) // " " String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y' // true
注意:fromCodePoint 方法定义在 String 对象上,而codePointAt 方法定义在字符串实例对象上
4. 字符串的遍历器接口
ES6为字符串添加了遍历器接口,字符串可以被for of 遍历
5. normalize()
用来将字符的不同表示方法统一为同样的形式,
6. includes(), startsWith(), endsWith()
传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。
includes():返回布尔值,表示是否找到了参数字符串。 startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。 endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
7. repeat()
用来返回一个新字符串,表示将原字符串重复N次
'x'.repeat(2) // 'xx' 'cx'.repeat(3) // 'cxcxcx' 参数NaN等同于 0。 'na'.repeat(NaN) // "" 如果repeat的参数是字符串,则会先转换成数字。 'na'.repeat('na') // "" 'na'.repeat('3') // "nanana"
8. padStart(),padEnd()
用于字符串的补全,接受两个参数,第一个字符串补全生效的最大长度,第二个是用来补全的字符串,如下:
'x'.padStart(5, 'ab') // 'ababx' 'x'.padStart(4, 'ab') // 'abax' 'x'.padEnd(5, 'ab') // 'xabab' 'x'.padEnd(4, 'ab') // 'xaba' 注意: 如果原字符串的长度等于或大于最大长度,则补全不生效,返回原字符串 如果补全字符串和原字符串,两者长度超过最大长度,则截取超出位数的补全字符串
9. matchAll()
matchAll方法返回一个正则表达式在当前字符串的所有匹配
10. 模板字符串
用来简化之前模板的写法,写法如下:
$('#result').append( 'There are <b>' + basket.count + '</b> ' + 'items in your basket, ' + '<em>' + basket.onSale + '</em> are on sale!' ); 上面这种写法相当繁琐不方便,ES6 引入了模板字符串解决这个问题。 $('#result').append(` There are <b>${basket.count}</b> items in your basket, <em>${basket.onSale}</em> are on sale! `); 大括号内部可以放入任意的 JavaScript 表达式,可以进行运算,以及引用对象属性。 let x = 1; let y = 2; `${x} + ${y} = ${x + y}` // "1 + 2 = 3" `${x} + ${y * 2} = ${x + y * 2}` // "1 + 4 = 5" let obj = {x: 1, y: 2}; `${obj.x + obj.y}` // "3"
11. 模板编译
使用<%...%>放置 JavaScript 代码,使用<%= ... %>输出 JavaScript 表达式,如下:
let template = ` <ul> <% for(let i=0; i < data.supplies.length; i++) { %> <li><%= data.supplies[i] %></li> <% } %> </ul> `;
12. 标签模板
模板字符串可以跟在一个函数名后面,该函数将被调用来处理这个模板字符串,这被称为 标签模板。 如下:
alert(123) alert`123`
标签模板其实不是模板,而是函数的一种特殊形式。“标签”就是函数,跟在后面的模板字符串就变成了它的参数。但是如果模板字符串里面有变量,就会将模板字符串先处理成多个参数,再调用函数。如下:
let a = 5; let b = 10; tag`Hello ${ a + b } world ${ a * b }`; // 等同于 tag(['Hello ', ' world ', ''], 15, 50);
- String.raw()
ES6 为原生 String 对象,提供了一个raw方法。用来充当模板字符串的处理函数,返回一个斜杠都被转义的字符串,对应于替换变量后的模板字符串。如下:
String.raw`Hi\n${2+3}!`; // 返回 "Hi\\n5!" String.raw`Hi\u000A!`; // 返回 "Hi\\u000A!"
- 模板字符串的限制
模板字符串默认会将字符串转义,导致无法嵌入其他语言。为了解决这个问题,ES2018 放松了对标签模板里面的字符串转义的限制。如果遇到不合法的字符串转义,就返回undefined,而不是报错,并且从raw属性上面可以得到原始字符串。
欢迎关注 公众号【小夭同学】
ES6入门系列
Git教程
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 查找一个字符串中最长不含重复字符的子字符串,计算该最长子字符串的长度
- 字符串、字符处理总结
- 高频算法面试题(字符串)leetcode 387. 字符串中的第一个唯一字符
- php删除字符串最后一个字符
- (三)C语言之字符串与字符串函数
- 算法笔记字符串处理问题H:编排字符串(2064)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。