本節(jié)我們來學(xué)習(xí) ES6 中字符串類型的擴(kuò)展，包括一些字符串對象的新增方法的使用等。

字符的 Unicode 表示法

ES6 加強(qiáng)了對 Unicode 的支持，JavaScript 中可以采用 \\uxxx 形式表示一個(gè)字符，其中 xxxx 表示字符的碼點(diǎn)。例如：

console.log("\u0075"); // u

但是這種表示法只限于碼點(diǎn)在 \\u0000~\\uFFFF 之間的字符。超出這個(gè)范圍的字符，必須用兩個(gè)雙字節(jié)的形式表示。

console.log("\uD842\uDFB7"); // 𠮷
console.log("\u20BB8"); // 8

這表示，如果直接在 \\u 后面跟上超過 0xFFFF 的數(shù)值，例如 \\u20BB8，JavaScript 會(huì)理解成 \\u20BB+8。由于 \\u20BB 是一個(gè)不可打印字符，所以只會(huì)顯示一個(gè)空格，后面跟著一個(gè) 8。

ES6 對這一點(diǎn)做出了改進(jìn)，只要將碼點(diǎn)放入大括號(hào)，就能正確解讀該字符。

console.log("\u{20BB7}"); // 𠮷

console.log("\u{41}\u{42}\u{43}"); // ABC

let hello = 123;
console.log(hell\u{6F}); // 123

 
console.log('\u{1F680}' === '\uD83D\uDE80'); // true

上面代碼中，最后一個(gè)例子表明，大括號(hào)表示法與四字節(jié)的 UTF-16 編碼是等價(jià)的。

有了這種表示法之后，JavaScript共有6種方法可以表示一個(gè)字符。

'\z' === 'z' // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true

遍歷器接口

ES6 為字符串添加了遍歷器接口，使得字符串可以被 for...of 循環(huán)遍歷。

示例：
例如我們遍歷字符串 xkd：

for (let i of 'xkd') {
 console.log(i)
}

輸出：

x
k
d

除了遍歷字符串，這個(gè)遍歷器最大的優(yōu)點(diǎn)是可以識(shí)別大于 0xFFFF 的碼點(diǎn)，傳統(tǒng)的 for 循環(huán)無法識(shí)別這樣的碼點(diǎn)。

示例：

let a = String.fromCodePoint(0x20BB7);

for (let i = 0; i < a.length; i++) {
 console.log(a[i]);
}

for (let i of a) {
 console.log(i);
}

上述代碼中，字符串 a 只有一個(gè)字符，但是 for 循環(huán)會(huì)認(rèn)為它包含兩個(gè)字符（都不可打?。?，而 for...of 循環(huán)會(huì)正確識(shí)別出這一個(gè)字符。

模板字符串的使用

我們在 JavaScript 語言中，如果要輸出內(nèi)容，通?？梢韵裣旅孢@樣寫的：

var name = "俠課島";
var age = 10;
console.log("我的名字是"+ name + "，我今年" + age + "歲了。" );
// 輸出：我的名字是俠課島，我今年10歲了。

這種寫法需要使用大量的雙引號(hào)和加號(hào)來拼接才能得到我們需要的模板，非常不方便。

而在 ES6 中提供了模板字符串，只需要將想要輸出的內(nèi)容用反引號(hào)標(biāo)識(shí)，然后變量部分使用 ${} 括起來即可。

示例：
上面的例子可以用模板字符串寫成下面這樣：

var name = "俠課島";
var age = 10;
console.log( `我的名字是${name} ，我今年${age}歲了。`);

// 輸出：我的名字是俠課島，我今年10歲了。

這樣寫很明顯語法語法簡潔了很多，不需要再使用大量的雙引號(hào)和加號(hào)來拼接字符串和變量。

模板字符串都是使用反引號(hào)表示的，如果我們希望在模板字符串中使用反引號(hào)，則需要在前面使用反斜杠 \\ 轉(zhuǎn)義。

示例：

let content = `\`hello\` xkd!`;
console.log(content); // 輸出：`hello` xkd!

如果使用模板字符串表示多行字符串，所有的空格和縮進(jìn)都會(huì)被保留在輸出之中。

console.log( `你好\` 我叫做俠課島,
今年3歲啦！`);

執(zhí)行代碼后，會(huì)直接輸出如下所示內(nèi)容：

你好` 我叫做俠課島,
 今年3歲啦！

在模板字符串中嵌入變量

如果我們想要在模板字符串中嵌入變量，那么變量需要寫在 ${} 之中才能夠正常使用，否則會(huì)當(dāng)做普通字符串輸出。

示例：

var name= "xkd";
console.log(`你好，${name}`);

// 輸出：你好，xkd

但是如果模板字符串中的變量沒有被聲明，將導(dǎo)致報(bào)錯(cuò)喲。

let content = `Hello, ${name}`;
console.log(content);  // 輸出：ReferenceError: name is not defined

由于模板字符串的大括號(hào)內(nèi)部，就是執(zhí)行 JavaScript 代碼，因此如果大括號(hào)內(nèi)部是一個(gè)字符串，將會(huì)原樣輸出。

let content = `Hello, ${"xkd"}`;
console.log(content); // 輸出：Hello, xkd

大括號(hào) ${} 內(nèi)部可以放入任意的 JavaScript 表達(dá)式，可以進(jìn)行運(yùn)算，以及引用對象屬性。

var a = 10;
var b = 20;
console.log(`a=${++a}， b=${a+b}`);

// 輸出：a=11， b=31

在模板字符串中調(diào)用函數(shù)

ES6 中模板字符串有一個(gè)更強(qiáng)大的功能，就是我們可以在模板字符串之中調(diào)用函數(shù)。

示例：

function show() {
 return "俠課島";
}

console.log(`你好，你叫什么名字?
你好，我叫${show()}`);

執(zhí)行代碼后，輸出內(nèi)容如下所示：

你好，你叫什么名字?
你好，我叫俠課島

如果大括號(hào)中的值不是字符串，將按照一般的規(guī)則轉(zhuǎn)為字符串。比如，大括號(hào)中是一個(gè)對象，將默認(rèn)調(diào)用對象的toString 方法。

判斷是否包含子字符串

JavaScript 想要判斷字符串是否包含子字符串，可以使用 indexOf() 方法。但是在 ES6 中又新增了三種方法可以用來判處案是否包含子字符串，如下所示：

• includes()：返回布爾值，表示是否找到了參數(shù)字符串。
• startsWith()：返回布爾值，表示參數(shù)字符串是否在原字符串的頭部。
• endsWith()：返回布爾值，表示參數(shù)字符串是否在原字符串的尾部。

示例：

這三個(gè)方法都可以接受兩個(gè)參數(shù)，第一個(gè)參數(shù)為需要搜索的字符串，第二個(gè)參數(shù)為可選的搜索起始位置索引：

let string = "hello, xkd";

console.log(string.includes("hello")); // true
console.log(string.startsWith("x", 7)); // true
console.log(string.endsWith("abc"));  // false

注意上述方法的返回值都為布爾值，所以如果需要知道子字符串的位置，還是得用 indexOf() 和 lastIndexOf() 方法。

字符串重復(fù)

在 ES6 中新增了一個(gè) repeat() 方法，用于返回新的字符串，表示將字符串重復(fù)指定次數(shù)返回。

示例：

console.log("a".repeat(5)); // 輸出：aaaaa

如果 repeat() 函數(shù)中的參數(shù)為小數(shù)，則會(huì)向下取整：

console.log("a".repeat(3.1)); // 輸出：aaa
console.log("b".repeat(4.5)); // 輸出：bbbb
console.log("c".repeat(5.9)); // 輸出：ccccc

如果參數(shù)為 0 到 -1 之間的小數(shù)，會(huì)進(jìn)行取整運(yùn)算，0 至 -1 之間的小數(shù)取整得到 -0，等同于重復(fù)零次：

console.log("a".repeat(-0.1)); // 輸出：""
console.log("b".repeat(-0.9)); // 輸出：""

如果傳入的參數(shù)是字符串，則會(huì)先將字符串轉(zhuǎn)化為數(shù)字：

console.log("a".repeat("five")); // 輸出: ""
console.log("b".repeat("3"));  // 輸出: bbb

字符串補(bǔ)全

ES6 中為字符串補(bǔ)全提供了兩個(gè)新的方法，如下所示：

• padStart()：返回新的字符串，表示用參數(shù)字符串從頭部（左側(cè)）補(bǔ)全原字符串。
• padEnd()：返回新的字符串，表示用參數(shù)字符串從尾部（右側(cè)）補(bǔ)全原字符串。

這兩個(gè)方法接受兩個(gè)參數(shù)，第一個(gè)參數(shù)是指定生成的字符串的最小長度，第二個(gè)參數(shù)是用來補(bǔ)全的字符串。如果沒有指定第二個(gè)參數(shù)，默認(rèn)用空格填充。

示例：

console.log("xkd".padStart(5, "o")); // 輸出：ooxkd 
console.log("a".padEnd(3, "xkd"));  // 輸出：axk
console.log("b".padStart(3));    // 輸出： b

如果指定的長度小于或者等于原字符串的長度，則返回原字符串：

console.log("hello".padStart(3,"a")); // hello
console.log("hello".padStart(7,"a")); // aahello

如果原字符串加上補(bǔ)全字符串長度大于指定長度，則截去超出位數(shù)的補(bǔ)全字符串：

console.log("hello".padEnd(7,",xkd!"));  // hello,x
console.log("abcde".padEnd(10,"fghijk")); // abcdefghij

還可以用于補(bǔ)全位數(shù)：

console.log("1".padStart(10, "0")); // 0000000001
console.log("2".padEnd(10, "0"));  // 2000000000

到此這篇關(guān)于ES6字符串的擴(kuò)展實(shí)例的文章就介紹到這了,更多相關(guān)ES6字符串?dāng)U展內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論