您好,登錄后才能下訂單哦!
字符串的擴(kuò)展
1 字符的Unicode表示法
js允許采用\uxxxx形式表示一個(gè)字符,其中xxxx表示字符的碼點(diǎn)。
"\u0061"
//a
ES6做出了一點(diǎn)改進(jìn),大括號(hào)表示法與四字節(jié)的UTF-16編碼是等價(jià)的,只要將碼點(diǎn)放入大括號(hào),就能正確解讀。
2 codePointAt()
js內(nèi)部,字符以UTF-16的格式存儲(chǔ),每個(gè)字符固定為2字節(jié)。對(duì)于那些需要4個(gè)字節(jié)存儲(chǔ)的字符,js會(huì)認(rèn)為他們是2個(gè)字符。ES6提供了codePointAt()方法,能夠正確處理4個(gè)字節(jié)存儲(chǔ)的字符,返回一個(gè)字符的碼點(diǎn)。
codePointAt()方法是測(cè)試一個(gè)字符由2個(gè)還是4個(gè)字節(jié)組成的最簡(jiǎn)單方法。
function is32Bit(c){
return c.codePointAt(0)>0xFFFF;
}
3 String.fromCodePoint()
ES5提供了String.fromCharCode方法,用于從碼點(diǎn)返回對(duì)應(yīng)字符,但是這個(gè)方法不能識(shí)別32位的UTF-16字符。ES6提供了String.fromCodePoint方法,彌補(bǔ)了String.fromCharCode方法的不足。
該方法作用上正好和codePointAt方法相反。
4 字符串的遍歷器接口
ES6為字符串添加了遍歷器接口,使字符串可以由for...of循環(huán)遍歷。
for (let codePoint of 'foo'){
console.log(codePoint);
}
// "f"
//"o"
//"o"
這個(gè)遍歷器最大的優(yōu)點(diǎn)是可以識(shí)別大于0xFFFF的碼點(diǎn),傳統(tǒng)for循環(huán)無(wú)法識(shí)別。
5 at()
ES6為字符串實(shí)例提供了at方法,等同于ES5的charAt方法,并可以識(shí)別Unicode編號(hào)大于0xFFFF的字符。
6 normalize()
7 includes(), startsWith(), endsWith()
js中只有indexOf方法可以用來(lái)確定一個(gè)字符串是否包含在另一個(gè)字符串中。
ES6則又提供了3種新方法
includes() :返回布爾值,表示是否找了到參數(shù)字符串
startsWith() :返回布爾值, 表示參數(shù)字符串是否在源字符串的頭部。
endsWith(): 返回布爾值,表示參數(shù)字符串是否在源字符串的尾部。
8 repeat()
repeat 方法返回一個(gè)新的字符串,表示將原字符串重復(fù)n次。
參數(shù)是負(fù)數(shù)或者Infinity,會(huì)報(bào)錯(cuò)。小數(shù)會(huì)向下取整。如果是字符串,會(huì)先轉(zhuǎn)換成數(shù)字。
9 padStart(), padEnd()
ES7推出字符串補(bǔ)全長(zhǎng)度的功能。如果某個(gè)字符串未達(dá)到指定長(zhǎng)度,會(huì)在頭部或者尾部補(bǔ)全。
padStart 和padEnd分別接受兩個(gè)參數(shù),第一個(gè)用來(lái)指定字符串的最小長(zhǎng)度,第二個(gè)則是用來(lái)補(bǔ)全的字符串。
如果原字符串的長(zhǎng)度等于或者大于指定的最小長(zhǎng)度,則返回原字符串。
如果省略第二個(gè)參數(shù),則會(huì)用空格來(lái)補(bǔ)全。
10 模板字符串
模板字符串是增強(qiáng)版的字符串,用反引號(hào)(`)標(biāo)識(shí)。他可以當(dāng)做普通字符串使用,也可以用來(lái)定義多行字符串,或者在字符串中嵌入變量。
$("#result").append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
如果在模板字符串中需要使用反引號(hào),則在其前面要用反斜杠轉(zhuǎn)義。
var greeting = `\`yo\`world!`;
在模板字符串中使用多行字符,所有空格和縮進(jìn)都會(huì)被保留在輸出中。
大括號(hào)內(nèi)可以放入任意的js表達(dá)式,可以進(jìn)行運(yùn)算,以及引用對(duì)象屬性。
模板字符串中還能調(diào)用函數(shù)
如果大括號(hào)中的值不是字符串,將按照一般的規(guī)則轉(zhuǎn)化成為字符串。
11.實(shí)例:模板編譯
下面,我們來(lái)看一個(gè)通過(guò)模板字符串,生成正式模板的實(shí)例。
var template = `
<ul>
<% for(var i=0; i < data.supplies.length; i++) { %>
<li><%= data.supplies[i] %></li>
<% } %>
</ul>
`;
上面代碼在模板字符串之中,放置了一個(gè)常規(guī)模板。該模板使用<%...%>放置JavaScript代碼,使用<%= ... %>輸出JavaScript表達(dá)式。
怎么編譯這個(gè)模板字符串呢?
一種思路是將其轉(zhuǎn)換為JavaScript表達(dá)式字符串。
echo('<ul>');
for(var i=0; i < data.supplies.length; i++) {
echo('<li>');
echo(data.supplies[i]);
echo('</li>');
};
echo('</ul>');
這個(gè)轉(zhuǎn)換使用正則表達(dá)式就行了。
var evalExpr = /<%=(.+?)%>/g;
var expr = /<%([\s\S]+?)%>/g;
template = template
.replace(evalExpr, '`); \n echo( $1 ); \n echo(`')
.replace(expr, '`); \n $1 \n echo(`');
template = 'echo(`' + template + '`);';
然后,將template封裝在一個(gè)函數(shù)里面返回,就可以了。
var script =
`(function parse(data){
var output = "";
function echo(html){
output += html;
}
${ template }
return output;
})`;
return script;
將上面的內(nèi)容拼裝成一個(gè)模板編譯函數(shù)compile。
function compile(template){
var evalExpr = /<%=(.+?)%>/g;
var expr = /<%([\s\S]+?)%>/g;
template = template
.replace(evalExpr, '`); \n echo( $1 ); \n echo(`')
.replace(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函數(shù)的用法如下。
var parse = eval(compile(template)); //eval()計(jì)算字符串方法。
div.innerHTML = parse({ supplies: [ "broom", "mop", "cleaner" ] });
// <ul>
// <li>broom</li>
// <li>mop</li>
// <li>cleaner</li>
// </ul>
12. 標(biāo)簽?zāi)0?br />
模板字符串可以緊跟在一個(gè)函數(shù)后面,該函數(shù)將被調(diào)用來(lái)處理這個(gè)模板字符串。稱(chēng)之為“標(biāo)簽?zāi)0濉惫δ?。?biāo)簽?zāi)0迤鋵?shí)不是模板,而是函數(shù)調(diào)用的一種特殊形式?!皹?biāo)簽”指的就是函數(shù),緊跟在后面的模板字符串就是它的參數(shù)。
但是,如果模板字符里面有變量,就不是簡(jiǎn)單的調(diào)用了,而是會(huì)將模板字符串先處理成多個(gè)參數(shù),再調(diào)用函數(shù)。
var a = 5;
var b = 10;
tag`Hello ${ a + b } world ${ a * b }`;
// 等同于
tag(['Hello ', ' world ', ''], 15, 50);
上面代碼中,模板字符串前面有一個(gè)標(biāo)識(shí)名tag,它是一個(gè)函數(shù)。整個(gè)表達(dá)式的返回值,就是tag函數(shù)處理模板字符串后的返回值。
函數(shù)tag依次會(huì)接收到多個(gè)參數(shù)。
function tag(stringArr, value1, value2){
// ...
}
// 等同于
function tag(stringArr, ...values){
// ...
}
tag函數(shù)的第一個(gè)參數(shù)是一個(gè)數(shù)組,該數(shù)組的成員是模板字符串中那些沒(méi)有變量替換的部分,也就是說(shuō),變量替換只發(fā)生在數(shù)組的第一個(gè)成員與第二個(gè)成員之間、第二個(gè)成員與第三個(gè)成員之間,以此類(lèi)推。
tag函數(shù)的其他參數(shù),都是模板字符串各個(gè)變量被替換后的值。由于本例中,模板字符串含有兩個(gè)變量,因此tag會(huì)接受到value1和value2兩個(gè)參數(shù)。
tag函數(shù)所有參數(shù)的實(shí)際值如下。
第一個(gè)參數(shù):['Hello ', ' world ', '']
第二個(gè)參數(shù): 15
第三個(gè)參數(shù):50
也就是說(shuō),tag函數(shù)實(shí)際上以下面的形式調(diào)用。
tag(['Hello ', ' world ', ''], 15, 50)
我們可以按照需要編寫(xiě)tag函數(shù)的代碼。下面是tag函數(shù)的一種寫(xiě)法,以及運(yùn)行結(jié)果。
var a = 5;
var b = 10;
function tag(s, v1, v2) {
console.log(s[0]);
console.log(s[1]);
console.log(s[2]);
console.log(v1);
console.log(v2);
return "OK";
}
tag`Hello ${ a + b } world ${ a * b}`;
// "Hello "
// " world "
// ""
// 15
// 50
// "OK"
13 String.raw()
ES6還為原聲的String對(duì)象提供了raw方法。
String.raw方法往往用來(lái)充當(dāng)模板字符串的處理函數(shù),返回一個(gè)反斜線都會(huì)被轉(zhuǎn)義(既反斜線前加反斜線)的字符串,對(duì)應(yīng)于替換變量后的模板字符串
如果原字符串的反斜線已經(jīng)轉(zhuǎn)義,那么String.raw不會(huì)做任何處理。
String.raw方法可以作為處理模板字符串的基本方法,它會(huì)將所有變量替換,而且對(duì)斜杠進(jìn)行轉(zhuǎn)義,方便下一步作為字符串來(lái)使用。
String.raw方法也可以作為正常的函數(shù)使用。這時(shí),它的第一個(gè)參數(shù),應(yīng)該是一個(gè)具有raw屬性的對(duì)象,且raw屬性的值應(yīng)該是一個(gè)數(shù)組。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。