ES6 字符串的扩展
字符的Unicode表示法
JavaScript允许采用\uXXXX形式表示一公分字符,其中XXXX表示字符的码点。
"\u0061"
//"a"
但是,这种表示法只限于\u0000-\uFFFF之间的字符。超出这个范围的字符,必须用2个双字节的形式表达。
"\uD842\uDFB7"
//"吉"
"\u20BB7"
//"7"
上面的代码表示,如果直接在\u后面跟上超过0xFFFF的数值(比如\u20BB7),JavaScript会理解成\u20BB+7.由于\u20bb是一个不可打印字符,所以只会显示一个空格,后面跟一个7。ES6对这点做了改进,只要将代码放入大括号,就能正确解读该字符。
"\u{20BB7}"
//"吉"
"\u{41}\u{42}\u{43}"
//"ABC"
let hello = 123;
hell\u{6f}//123
'\u{1F680}' === '\uD830D\uDE880'
//true
上面的代码中,最后一个例子表明,大括号的表示法与4字节的UTF编码是等价的。
有了这种表示方法以后,js共有6种方法可以表示一个字符
'\z' === 'z'//true
'\172' === 'z'//true
'\x7A' === 'z'//true
'\u007A' === 'z'//true
'\u{7A}' === 'z'//true
codePointAt()
javaScript内部,字符以UTF-16的格式储存,每个字符固定为2字节。对于哪些需要4字节储存的字符(Unicode码点大于0xFFFF的字符),JavaScript会认为它们是2个字符。
var s = "吉";
s.length//2
s.charAt(0)//''
s.charAt(1)//''
s.charCodeAt(0)//55362
s.charCodeAt(1)//57270
上面代码中,汉字“吉”的码点是0x20BB7,UTF-16编码为0xD842 0xDFB7(十进制为5536257271),需要4个字节储存。对于这种4个字节的字符,js不能正确处理,字符串长度会被误判为2,而且charAt方法无法读取整个字符,charCodeAt方法只能分别返回前2个字节和后2个字节的值。
es6提供了codePointAt方法,能够正确处理4个字节储存的字符,返回一个字符的码点
var s = "吉a";
s.codePointAt(0)//134071
s.codePointAt(1)//57271
s.charCodeAt(2)//97
codePointAt方法的参数是字符在字符串中的位置(从0开始)。上面的代码中,JavaScript将“吉a”视为3个字符。codePointAt方法在第一个字符上正确地识别了“吉”,返回了它地十进制码点134071(即十六进制地20BB7).在第二个字符和第三个字符“a”上,codePoint方法返回地结果与charCodeAt方法相同。
总之,codePointAt方法会正确返回32位的UTF-16字符的码点。对于哪些2个字符储存的常规字符,它的返回结果与charCodeAt方法相同
codePointAt方法返回的是码点的十进制值,如果想要十六进制的值,可以v使用toString方法转换一下。
var s='吉a';
s.codePOintAt(0).toString(16)//"20BB7"
s.charCodeAt(2).toString(16)//"61"
我们注意到,codePointAt方法的参数仍然是不正确的。比如字符a在字符串s中的正确位置序号应该是1,但是必须向charCodeAt方法传入2.解决问题的一个办法是使用for...of循环,因为它会正确识别32位deUTF-16字符。
var s='吉a';
for(let ch of s) {
console.log(ch.codePointAt(0).tostring(16));}
//"20bb7"
//""
codePointAt方法是测试一个字符是由2个还是4个字节组成的最简单的方法
String.fromCodePoint()
ES5提供String.fromCharCode方法,用于从码点返回对应字符,但是这个方法不能识别32位的UTF-16字符(Unicode编号大于0xFFFF)。
String.fromCharCode(0x20BB7)
// "ஷ"
上面代码中,String.fromCharCode不能识别大于0xFFFF的码点,所以0x20BB7就发生了溢出,最高位2被舍弃了,最后返回码点U+0BB7对应的字符,而不是码点U+20BB7对应的字符。
ES6提供了String.fromCodePoint方法,可以识别0xFFFF的字符,弥补了String.fromCharCode方法的不足。在作用上,正好与codePointAt方法相反。
String.fromCodePoint(0x20BB7)
// ""
String.fromCodePoint(0x78, 0x1f680, 0x79) === 'x\uD83D\uDE80y'
// true
上面代码中,如果String.fromCodePoint方法有多个参数,则它们会被合并成一个字符串返回。
注意,fromCodePoint方法定义在String对象上,而codePointAt方法定义在字符串的实例对象上。
字符串的遍历器接口
ES6为字符串添加了遍历器接口(详见《Iterator》一章),使得字符串可以被for...of循环遍历。
for (let codePoint of 'foo') {
console.log(codePoint)
}
// "f"
// "o"
// "o"
除了遍历字符串,这个遍历器最大的优点是可以识别大于0xFFFF的码点,传统的for循环无法识别这样的码点。
var text = String.fromCodePoint(0x20BB7);
for (let i = 0; i < text.length; i++) {
console.log(text[i]);
}
// " "
// " "
for (let i of text) {
console.log(i);
}
// ""
上面代码中,字符串text只有一个字符,但是for循环会认为它包含两个字符(都不可打印),而for...of循环会正确识别出这一个字符。
at()
ES5对字符串对象提供charAt方法,返回字符串给定位置的字符。该方法不能识别码点大于0xFFFF的字符。
'abc'.charAt(0) // "a"
''.charAt(0) // "\uD842"
上面代码中,charAt方法返回的是UTF-16编码的第一个字节,实际上是无法显示的。
目前,有一个提案,提出字符串实例的at方法,可以识别Unicode编号大于0xFFFF的字符,返回正确的字符。
'abc'.at(0) // "a"
''.at(0) // ""
这个方法可以通过垫片库实现。
normalize()
许多欧洲语言有语调符号和重音符合。为了表示它们,Unicode提供了两种方法。一种是直接提供带重音符号的字符,比如Ǒ(\u01D1)。另一种是提供合成符号(combining character),即原字符与重音符号的合成,两个字符合成一个字符,比如O(\u004F)和ˇ(\u030C)合成Ǒ(\u004F\u030C)。
这两种表示方法,在视觉和语义上都等价,但是JavaScript不能识别。
'\u01D1'==='\u004F\u030C' //false
'\u01D1'.length // 1
'\u004F\u030C'.length // 2
上面代码表示,JavaScript将合成字符视为两个字符,导致两种表示方法不相等。
ES6提供字符串实例的normalize()方法,用来将字符的不同表示方法统一为同样的形式,这称为Unicode正规化。
'\u01D1'.normalize() === '\u004F\u030C'.normalize()
// true
normalize方法可以接受一个参数来指定normalize的方式,参数的四个可选值如下。
- NFC,默认参数,表示“标准等价合成”(Normalization Form Canonical Composition),返回多个简单字符的合成字符。所谓“标准等价”指的是视觉和语义上的等价。
- NFD,表示“标准等价分解”(Normalization Form Canonical Decomposition),即在标准等价的前提下,返回合成字符分解的多个简单字符。
- NFKC,表示“兼容等价合成”(Normalization Form Compatibility Composition),返回合成字符。所谓“兼容等价”指的是语义上存在等价,但视觉上不等价,比如“囍”和“喜喜”。(这只是用来举例,normalize方法不能识别中文。)
- NFKD,表示“兼容等价分解”(Normalization Form Compatibility Decomposition),即在兼容等价的前提下,返回合成字符分解的多个简单字符。
'\u004F\u030C'.normalize('NFC').length // 1
'\u004F\u030C'.normalize('NFD').length // 2
面代码表示,NFC参数返回字符的合成形式,NFD参数返回字符的分解形式。
不过,normalize方法目前不能识别三个或三个以上字符的合成。这种情况下,还是只能使用正则表达式,通过Unicode编号区间判断
includes(), startsWith(), endsWith()
传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。
- includes():返回布尔值,表示是否找到了参数字符串。
- startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
- endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。
var s = 'Hello world!';
s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true
这三个方法都支持第二个参数,表示开始搜索的位置。
var s = 'Hello world!';
s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false
上面代码表示,使用第二个参数n时,endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。
repeat()
repeat方法返回一个新字符串,表示将原字符串重复n次。
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
参数如果是小数,会被取整。
'na'.repeat(2.9) // "nana"
如果repeat的参数是负数或者Infinity,会报错。
'na'.repeat(Infinity)
// RangeError
'na'.repeat(-1)
// RangeError
但是,如果参数是0到-1之间的小数,则等同于0,这是因为会先进行取整运算。0到-1之间的小数,取整以后等于-0,repeat视同为0
'na'.repeat(-0.9) // ""
参数NaN等同于0。
'na'.repeat(NaN) // ""
如果repeat的参数是字符串,则会先转换成数字。
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"
padStart(),padEnd()
ES7推出了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart用于头部补全,padEnd用于尾部补全。
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'
'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'
上面代码中,padStart和padEnd一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。
如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串。
'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'
如果用来补全的字符串与原字符串,两者的长度之和超过了指定的最小长度,则会截去超出位数的补全字符串
'abc'.padStart(10, '0123456789')
// '0123456abc'
如果省略第二个参数,则会用空格补全长度。
'x'.padStart(4) // ' x'
'x'.padEnd(4) // 'x '
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"
模板字符串
传统的模板
$("#result").append(
"There are <b>"+
basket.count+
"</b>"+
"items inyour 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
);
模板字符串是增强版的字符串,用反引号(')标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。
知识点
- 如果在模板字符串中想使用反引号,要使用双斜杠转译
var a = '\'yo\ haha'
使用模板字符串,所有的空格和缩进都会被保留进输出中。
在模板字符串中嵌入变量,需要将变量写在${}中。大括号内可以放任意的js表达式,可以进行运算,以及引用对象属性。如果大括号中的值不是字符,则自动用toString方法转为字符。
模板字符串还能调用函数
function f() {
return 0;
}
'hahaha${f()}ha'
- 如果模板字符串中的变量没有声明将报错
- 如果${}中是一个字符串,会原样输出
'h${'hhh'}h'
//hhhhh
7.引用模板字符串本身的写法
let str = 'retrue'+''h${name}'';
let f = new Function('name',str);
f('jack')//"hjack"
实例:模板编译
下面我们看一个通过模板字符串生成正式模板的实例
var temple = '<ul>
<% for(var i = 0;i < data.supplies.length;i++) {% >
<li><%=data.supplies[i]%></li>
<% } %>
</ul>';
上面的代码在模板字符串中放置了一个常规模板。该模板使用<%...%>放置js代码,用<%=...%>输出js表达式。
怎么编译这个模板字符串呢?
思路1:将其转化为js表达式字符串
echo('<ul>');
for(var i=0;i<data.supplies.length;i++) {
echo('<li>');
echo(data.supplies[i]);
echo('</li>');
};
echo('<ul>'
这种转换使用正则表达式即可。
var evalExpr = /<%=(.+?)%>/g;
var expr = /<%([\s\S]+?)%>/g;
template = template
.replace(evalExp,'');\n echo($1); \n echo('')
.repalce(expr,'');\n$1 \n echo('');
template = 'echo(''+template+'');';
然后将template封装在一个函数里面返回即可。
var script =
'(function parse(data){
var output = "";
function echo(html) {
output+=html;
}
${template}
return output;
})';
将上面内容拼装成模板编译函数compile
function compile() {
var evalExpr = /<%=(,+?)%>/g;
var expr = /<%([/s/S]+?)%>/g;
template = template
.replace(evalExp,'');\n echo($1); \n echo('')
.repalce(expr,'');\n$1 \n echo('');
template = 'echo(''+template+'');';
var script =
'(function parse(data){
var output = "";
function echo(html) {
output+=html;
}
${template}
return output;
})';
return script;
}
compile函数的用法如下:
var parse = eval(compile(template));
div.innerHtML = parse({supplies:["broom","mop","cleaner"]});
//<ul>
// <li>broom</li>
// <li>mop</li>
// <li>cleaner</li>
//</ul>
标签模板
模板字符串可以跟在一个函数名后面,该函数将被调用来处理这个模板字符串。这被称为“标签模板”功能。
这其实是函数调用的一种特殊形式。“标签”指的就是函数,紧跟在后面的模板字符串就是它的参数。
var a = 5;
var b = 10;
tag'h${a+b}h${a*b}';
上面代码中,模板字符串前面有一个标识名tag,它是一个函数。整个表达式大热返回值,就是tag会依次接收到多个参数。
function tag(stringArr,value1,value2){
//...
}
//等同于
function tag(stringArr,...values){
//...
}
tag函数的第一个参数是一数组,该数组的成员是模板字符串中那些没有变量替换的部分,也就是说,变量替换只发生在数组的第一个成员和第二个成员之间、第二个成员和第三个成员之间,以此类推。
tag函数的其他参数都是模板字符串其他变量被替换后的值。由于本例中,模板字符串含有两个变量,因此tag会接收到value1和vaule2两个参数。
“标签模板”的一个重要应用就是过滤html字符串,防止用户输入恶意内容。
var message = SaferHTML'<p>${sender} has sent you a message.</p>';
function SaferHTML(templateData) {
for (var i = 1; i < arguments.length; i++) {
var arg = String(arguments[i]);
s += arg.replace(/&/g,"&")
.replace(/</g,"<")
.replace(/>/g,">");
s += templateData[i];
}
return s;
}
上面代码中,经过函数SaferHTML的处理,HTML字符串中的特殊字符都会被转译。
模板标签的另一个应用是多语言的转换。
i18n'Welcome to ${siteName},you are visitor number ${visitorNumber}!'
//欢迎访问XXX,您是第XXXX位访问者
模板字符串本身并不能取代Mustache之类的模板库,因为没有条件判断和循环处理功能,但是通过标签函数,你可以自己添加这些功能。
var libraryHtml = hashTemplate'
<ul>
#for book in${myBooks}
<li><i>#{book.title}</i>by#{book.author}</li>
#end
</ul>
';
除此之外,你还可以使用标签模板,在javascript语言中嵌入其他语言。
jsx'
<div>
<input
ref='input'
onChange='${this.handleChange}'
defaultValue='${this.state.value'/>
${this.state.value}
</div>
'
上面代码中通过jsx函数将一个dom字符串转化为React对象
String.raw()
ES6 字符串的扩展的更多相关文章
- es6 字符串的扩展和数值的扩展
es6字符串的扩展 1. es6新增的一些方法 1.1 includes 判断是否包括在内,返回一个 true or false 1.2 statsWith 判断是否以什么开头,返回一个 true o ...
- ES6字符串相关扩展
变量的解构赋值 // 数组的解构赋值 let [a,b,c] = [1,2,3]; //1,2,3 let [a,b,c] = [,123,]; //undefined 123 undefined l ...
- es6字符串的扩展
字符串的扩展 Unicode表示法:大括号包含表示Unicode字符(\u{0xXX}或\u{0XXX}) 字符串遍历:可通过for-of遍历字符串 字符串模板:可单行可多行可插入变量的增强版字符串 ...
- es6字符串的扩展学习笔记
1. 传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中.ES6又提供了三种新方法. includes():返回布尔值,表示是否找到了参数字符串. st ...
- es6字符串的扩展——模板
todo1.模板字符串 传统的 JavaScript 语言,输出模板通常是这样写的(下面使用了 jQuery 的方法). $('#result').append( 'There are <b&g ...
- ES6 - 字符串的扩展(模版字符串)
模板字面量的最简单语法,是使用反引号( `)(Tab上面那个键)来包裹普通字符串,而不是用双引号或单引号. <!DOCTYPE html> <html lang="en&q ...
- ES6 字符串的扩展(待细读)
1.确定字符串中是否含有某个字符串 indexof(value,num):可返回某个指定的字符串值在字符串中首次出现的位置.ES5方法,num范围(0~length-1) includes(value ...
- ES6模板字符串及字符串的扩展方法
一.ES6模板字符串 传统定义字符串的方式是: const str='hello es2015,this is a string' ES6新增了一种定义字符串的方式用反引号进行标识 const str ...
- ES6走一波 字符串的扩展
ES6字符串扩展: 处理大码点字符 字符的Unicode表示法 \uxxxx表示一个字符串,超出 \u0000 ~ \uffff范围,必须用两个双字节形式表示. ES6改进为 将码点放到大括号 可正确 ...
随机推荐
- Python测试开发之函数
对于初学者而言,感觉函数还是不是很好理解,尤其是当写一个脚本,或者是写一个算法,认为可能for循环就已经可以解决的问题为什么还要用函数来实现呢? 今天就来说一下函数的优点,其实函数的最大优点就是可重用 ...
- MySql基础入门-mysql的结构层次
了解MySql必须牢牢记住其体系结构图,Mysql是由SQL接口,解析器,优化器,缓存,存储引擎组成的. 1.Connectors指的是不同语言中与SQL的交互 2.Management Servei ...
- codeforces 883M. Quadcopter Competition 思路
M. Quadcopter Competition time limit per test 3 seconds memory limit per test 256 megabytes input st ...
- PAT乙级--1003
1003. 我要通过!(20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue "答案正确"是 ...
- Springmvc ModelAndView踩过的坑之HttpServletResponse response
先抛出问题.以下两个方法声明有毛区别: @RequestMapping(value = "/rg") public void rg(@PathVariable Long pageI ...
- .NET Core快速入门教程 1、开篇:说说.NET Core的那些事儿
一..NET Core的诞生 聊 .NET Core,就不得不说他的爸爸 .NET.当年Java刚刚兴起,如火如荼,微软也非常推崇Java,当时Windows平台的Java虚拟机就是微软按照JVM标准 ...
- NOIP2017 小凯的疑惑
题目描述 小凯手中有两种面值的金币,两种面值均为正整数且彼此互素.每种金币小凯都有 无数个.在不找零的情况下,仅凭这两种金币,有些物品他是无法准确支付的.现在小 凯想知道在无法准确支付的物品中,最贵的 ...
- 简单用数组模拟顺序栈(c++版)适合新手
**栈是一种操作受限制的线性表,太多官方的话我也不说了,我们都知道栈元素是先进后出的,它有两种存储结构,分别是顺序存储结构和链式存储结构. **今天我先记一下顺序存储结构,后面我会加上链式存储结构的. ...
- FreeCAD源码阅读笔记
本文目标在于记录在FreeCAD源码阅读中了解到的一些东西. FreeCAD编译 FreeCAD源码的编译最好使用官方提供的LibPack,否则第三方库难以找全,找到之后还需要自己编译,此外还不知道C ...
- com.sun.mail.smtp.SMTPSendFailedException: 553 Mail from must equal authorized user
1.错误描写叙述 553 Mail from must equal authorized user com.sun.mail.smtp.SMTPSendFailedException: 553 Mai ...