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

字符的 Unicode 表示法

ES6 加強了對 Unicode 的支持，JavaScript 中可以采用 \\uxxx 形式表示一個字符，其中 xxxx 表示字符的碼點。例如：

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

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

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

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

ES6 對這一點做出了改進，只要將碼點放入大括號，就能正確解讀該字符。

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

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

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

'\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

除了遍歷字符串，這個遍歷器最大的優(yōu)點是可以識別大于 0xFFFF 的碼點，傳統(tǒng)的 for 循環(huá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 只有一個字符，但是 for 循環(huán)會認為它包含兩個字符（都不可打?。?for...of 循環(huán)會正確識別出這一個字符。

模板字符串的使用

我們在 JavaScript 語言中，如果要輸出內(nèi)容，通常可以像下面這樣寫的：

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

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

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

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

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

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

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

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

示例：

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

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

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

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

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

在模板字符串中嵌入變量

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

示例：

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

// 輸出：你好，xkd

但是如果模板字符串中的變量沒有被聲明，將導致報錯喲。

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

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

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

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

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

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

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

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

示例：

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

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

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

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

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

判斷是否包含子字符串

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

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

示例：

這三個方法都可以接受兩個參數(shù)，第一個參數(shù)為需要搜索的字符串，第二個參數(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 中新增了一個 repeat() 方法，用于返回新的字符串，表示將字符串重復(fù)指定次數(shù)返回。

示例：

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

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

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ù)，會進行取整運算，0 至 -1 之間的小數(shù)取整得到 -0，等同于重復(fù)零次：

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

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

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

字符串補全

ES6 中為字符串補全提供了兩個新的方法，如下所示：

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

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

示例：

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

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

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

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

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

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

最新評論