本節我們來學習 ES6 中字符串類型的擴展，包括一些字符串對象的新增方法的使用等。
字符的 Unicode 表示法
ES6 加強了對 Unicode 的支持，JavaScript 中可以采用 \\uxxx 形式表示一個字符，其中 xxxx 表示字符的碼點。例如：
|
1
|
console.log("\u0075"); // u |
但是這種表示法只限于碼點在 \\u0000~\\uFFFF 之間的字符。超出這個范圍的字符，必須用兩個雙字節的形式表示。
|
1
2
|
console.log("\uD842\uDFB7"); // console.log("\u20BB8"); // 8 |
這表示，如果直接在 \\u 后面跟上超過 0xFFFF 的數值，例如 \\u20BB8，JavaScript 會理解成 \\u20BB+8。由于 \\u20BB 是一個不可打印字符，所以只會顯示一個空格，后面跟著一個 8。
ES6 對這一點做出了改進，只要將碼點放入大括號，就能正確解讀該字符。
|
1
2
3
4
5
6
7
8
9
|
console.log("\u{20BB7}"); // console.log("\u{41}\u{42}\u{43}"); // ABClet hello = 123;console.log(hell\u{6F}); // 123 console.log('\u{1F680}' === '\uD83D\uDE80'); // true |
上面代碼中，最后一個例子表明，大括號表示法與四字節的 UTF-16 編碼是等價的。
有了這種表示法之后，JavaScript共有6種方法可以表示一個字符。
|
1
2
3
4
5
|
'\z' === 'z' // true'\172' === 'z' // true'\x7A' === 'z' // true'\u007A' === 'z' // true'\u{7A}' === 'z' // true |
遍歷器接口
ES6 為字符串添加了遍歷器接口，使得字符串可以被 for...of 循環遍歷。
示例：
例如我們遍歷字符串 xkd：
|
1
2
3
|
for (let i of 'xkd') { console.log(i)} |
輸出：
x
k
d
除了遍歷字符串，這個遍歷器最大的優點是可以識別大于 0xFFFF 的碼點，傳統的 for 循環無法識別這樣的碼點。
示例：
|
1
2
3
4
5
6
7
8
9
|
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 循環會認為它包含兩個字符（都不可打印），而 for...of 循環會正確識別出這一個字符。
模板字符串的使用
我們在 JavaScript 語言中，如果要輸出內容，通常可以像下面這樣寫的：
|
1
2
3
4
|
var name = "俠課島";var age = 10;console.log("我的名字是"+ name + "，我今年" + age + "歲了。" );// 輸出：我的名字是俠課島，我今年10歲了。 |
這種寫法需要使用大量的雙引號和加號來拼接才能得到我們需要的模板，非常不方便。
而在 ES6 中提供了模板字符串，只需要將想要輸出的內容用反引號標識，然后變量部分使用 ${} 括起來即可。
示例：
上面的例子可以用模板字符串寫成下面這樣：
|
1
2
3
4
5
|
var name = "俠課島";var age = 10;console.log( `我的名字是${name} ，我今年${age}歲了。`);// 輸出：我的名字是俠課島，我今年10歲了。 |
這樣寫很明顯語法語法簡潔了很多，不需要再使用大量的雙引號和加號來拼接字符串和變量。
模板字符串都是使用反引號表示的，如果我們希望在模板字符串中使用反引號，則需要在前面使用反斜杠 \\ 轉義。
示例：
|
1
2
|
let content = `\`hello\` xkd!`;console.log(content); // 輸出：`hello` xkd! |
如果使用模板字符串表示多行字符串，所有的空格和縮進都會被保留在輸出之中。
|
1
2
|
console.log( `你好\` 我叫做俠課島,今年3歲啦！`); |
執行代碼后，會直接輸出如下所示內容：
你好` 我叫做俠課島,
今年3歲啦！
在模板字符串中嵌入變量
如果我們想要在模板字符串中嵌入變量，那么變量需要寫在 ${} 之中才能夠正常使用，否則會當做普通字符串輸出。
示例：
|
1
2
3
4
|
var name= "xkd";console.log(`你好，${name}`);// 輸出：你好，xkd |
但是如果模板字符串中的變量沒有被聲明，將導致報錯喲。
|
1
2
|
let content = `Hello, ${name}`;console.log(content); // 輸出：ReferenceError: name is not defined |
由于模板字符串的大括號內部，就是執行 JavaScript 代碼，因此如果大括號內部是一個字符串，將會原樣輸出。
|
1
2
|
let content = `Hello, ${"xkd"}`;console.log(content); // 輸出：Hello, xkd |
大括號 ${} 內部可以放入任意的 JavaScript 表達式，可以進行運算，以及引用對象屬性。
|
1
2
3
4
5
|
var a = 10;var b = 20;console.log(`a=${++a}， b=${a+b}`);// 輸出：a=11， b=31 |
在模板字符串中調用函數
ES6 中模板字符串有一個更強大的功能，就是我們可以在模板字符串之中調用函數。
示例：
|
1
2
3
4
5
6
|
function show() { return "俠課島";}console.log(`你好，你叫什么名字?你好，我叫${show()}`); |
執行代碼后，輸出內容如下所示：
你好，你叫什么名字?
你好，我叫俠課島
如果大括號中的值不是字符串，將按照一般的規則轉為字符串。比如，大括號中是一個對象，將默認調用對象的toString 方法。
判斷是否包含子字符串
JavaScript 想要判斷字符串是否包含子字符串，可以使用 indexOf() 方法。但是在 ES6 中又新增了三種方法可以用來判處案是否包含子字符串，如下所示：
- includes()：返回布爾值，表示是否找到了參數字符串。
- startsWith()：返回布爾值，表示參數字符串是否在原字符串的頭部。
- endsWith()：返回布爾值，表示參數字符串是否在原字符串的尾部。
示例：
這三個方法都可以接受兩個參數，第一個參數為需要搜索的字符串，第二個參數為可選的搜索起始位置索引：
|
1
2
3
4
5
|
let string = "hello, xkd";console.log(string.includes("hello")); // trueconsole.log(string.startsWith("x", 7)); // trueconsole.log(string.endsWith("abc")); // false |
注意上述方法的返回值都為布爾值，所以如果需要知道子字符串的位置，還是得用 indexOf() 和 lastIndexOf() 方法。
字符串重復
在 ES6 中新增了一個 repeat() 方法，用于返回新的字符串，表示將字符串重復指定次數返回。
示例：
|
1
|
console.log("a".repeat(5)); // 輸出：aaaaa |
如果 repeat() 函數中的參數為小數，則會向下取整：
|
1
2
3
|
console.log("a".repeat(3.1)); // 輸出：aaaconsole.log("b".repeat(4.5)); // 輸出：bbbbconsole.log("c".repeat(5.9)); // 輸出：ccccc |
如果參數為 0 到 -1 之間的小數，會進行取整運算，0 至 -1 之間的小數取整得到 -0，等同于重復零次：
|
1
2
|
console.log("a".repeat(-0.1)); // 輸出：""console.log("b".repeat(-0.9)); // 輸出："" |
如果傳入的參數是字符串，則會先將字符串轉化為數字：
|
1
2
|
console.log("a".repeat("five")); // 輸出: ""console.log("b".repeat("3")); // 輸出: bbb |
字符串補全
ES6 中為字符串補全提供了兩個新的方法，如下所示：
- padStart()：返回新的字符串，表示用參數字符串從頭部（左側）補全原字符串。
- padEnd()：返回新的字符串，表示用參數字符串從尾部（右側）補全原字符串。
這兩個方法接受兩個參數，第一個參數是指定生成的字符串的最小長度，第二個參數是用來補全的字符串。如果沒有指定第二個參數，默認用空格填充。
示例：
|
1
2
3
|
console.log("xkd".padStart(5, "o")); // 輸出：ooxkd console.log("a".padEnd(3, "xkd")); // 輸出：axkconsole.log("b".padStart(3)); // 輸出： b |
如果指定的長度小于或者等于原字符串的長度，則返回原字符串：
|
1
2
|
console.log("hello".padStart(3,"a")); // helloconsole.log("hello".padStart(7,"a")); // aahello |
如果原字符串加上補全字符串長度大于指定長度，則截去超出位數的補全字符串：
|
1
2
|
console.log("hello".padEnd(7,",xkd!")); // hello,xconsole.log("abcde".padEnd(10,"fghijk")); // abcdefghij |
還可以用于補全位數：
|
1
2
|
console.log("1".padStart(10, "0")); // 0000000001console.log("2".padEnd(10, "0")); // 2000000000 |
到此這篇關于ES6字符串的擴展實例的文章就介紹到這了,更多相關ES6字符串擴展內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://segmentfault.com/a/1190000038557524
