關於ES6字串的擴充套件詳解

2022-08-15 14:02:41

一、字串的擴充套件

ES6 加強了對 Unicode 的支援，允許採用uxxxx形式表示一個字元，其中xxxx表示字元的 Unicode 碼點。

"u0061"
// "a"

ES6 為字串新增了遍歷器介面（詳見《Iterator》一章），使得字串可以被for...of迴圈遍歷。

for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

傳統的 JavaScript 語言，輸出模板通常是這樣寫的（下面使用了 jQuery 的方法）。

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your 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!
`);

傳統上，JavaScript 只有indexOf方法，可以用來確定一個字串是否包含在另一個字串中。ES6 又提供了三種新方法。

includes()：返回布林值，表示是否找到了引數字串。
startsWith()：返回布林值，表示引數字串是否在原字串的頭部。
endsWith()：返回布林值，表示引數字串是否在原字串的尾部。

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

這三個方法都支援第二個引數，表示開始搜尋的位置。

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

repeat方法返回一個新字串，表示將原字串重複n次。

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

ES2017 引入了字串補全長度的功能。如果某個字串不夠指定長度，會在頭部或尾部補全。padStart()用於頭部補全，padEnd()用於尾部補全。

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

ES2019 對字串範例新增了trimStart()和trimEnd()這兩個方法。它們的行為與trim()一致，trimStart()消除字串頭部的空格，trimEnd()消除尾部的空格。它們返回的都是新字串，不會修改原始字串。

const s = '  abc  ';

s.trim() // "abc"
s.trimStart() // "abc  "
s.trimEnd() // "  abc"

到此這篇關於ES6字串擴充套件的文章就介紹到這了,更多相關ES6字串擴充套件內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！