一：字符的 Unicode 表示法

JavaScript允許表示\u0000—\uFFFF之間的字符。超出這個范圍，必須用2個雙字節的形式表達。

如："\u20BB7"是漢字 "?" 的編碼，要使用如下方法表示：

"\uD842\uDFB7"

// "? "

?

如果直接用"\u20BB7" 會表示成：

"\u20BB7"

// " 7"

?

這是因為\u后面跟上超出范圍的數值，JavaScript會理解成\u20BB+7。由于\u20BB是一個不可打印的字符，所以只會顯示一個空格，后面跟一個7。而ES6允許將碼點放入大括號，就能正確解讀該字符。

"\u{20BB7}"

// " ? "

"\u{41}\u{42}\u{43}"

// "ABC"

?

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

'\z' === 'z' // true

'\172' === 'z' // true

'\x7A' === 'z' // true

'\u007A' === 'z' // true

'\u{7A}' === 'z' // true

?

二：at()

ES5 對字符串對象提供charAt方法，返回字符串給定位置的字符。該方法不能識別碼點大于0xFFFF的字符。

'abc'.charAt(0) // "a"

'? '.charAt(0) // "\uD842"

?

目前，有一個提案，提出字符串實例的at方法，可以識別 Unicode 編號大于0xFFFF的字符，返回正確的字符。

'abc'.at(0) // "a"

'? '.at(0) // "?"

?

三：includes(), startsWith(), endsWith()

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

includes() ：返回布爾值，表示是否找到了參數字符串。

startsWith() ：返回布爾值，表示參數字符串是否在源字符串的頭部。

endsWith() ：返回布爾值，表示參數字符串是否在源字符串的尾部。

?

var s = 'Hello world!';

s.startsWith('Hello') // true

s.endsWith('!') // true

s.includes('o') // true

?

這三個方法都支持第二個參數，表示開始搜索的位置。

var s = 'Hello world!';

s.startsWith('world', 6) // true

s.endsWith('Hello', 5) // true

s.includes('Hello', 6) // false

?

四：repeat()

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

'x'.repeat(3) // "xxx"

'hello'.repeat(2) // "hellohello"

'na'.repeat(0) // ""

?

參數如果是小數，會被取整。

'na'.repeat(2.9) // "nana"

?

如果repeat的參數是負數或者Infinity，會報錯。

'na'.repeat(Infinity)

// RangeError

'na'.repeat(-1)

// RangeError

?

五：padStart() ， padEnd()

ES7 推出了字符串補全長度的功能。如果某個字符串不夠指定長度，會在頭部或尾部補全。padStart用于頭部補全，padEnd用于尾部補全。

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

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

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

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

?

上面代碼中，padStart和padEnd一共接受兩個參數，第一個參數用來指定字符串的最小長度，第二個參數是用來補全的字符串。

?

?六:模板字符串

傳統的 JavaScript 語言，輸出模板通常是這樣寫的。

$('#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!

`);

模板字符串（ template string ）是增強版的字符串，用反引號（ ` ）標識。它可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中

嵌入變量。

以前的字符串連接都是用引號連接，換行的時候繁瑣麻煩，現在的這種模版字符串改變了以前換行麻煩，所有的空格與縮進都保留在輸出之中。

?

模板字符串中嵌入變量，需要將變量名寫在${}之中。

function authorize(user, action) {

if (!user.hasPrivilege(action)) {

throw new Error(

// 傳統寫法為

// 'User '

// + user.name

// + ' is not authorized to do '

// + action

// + '.'

`User ${user.name} is not authorized to do ${action}.`);

}

}

?

七:標簽模版

模板字符串的功能，不僅僅是上面這些。它可以緊跟在一個函數名后面，該函數將被調用來處理這個模板字符串。這被稱為 “ 標簽模板 ” 功能

alert`123`

// 等同于

alert(123)

?

標簽模板其實不是模板，而是函數調用的一種特殊形式。 “ 標簽 ” 指的就是函數，緊跟在后面的模板字符串就是它的參數。

但是，如果模板字符里面有變量，就不是簡單的調用了，而是會將模板字符串先處理成多個參數，再調用函數。

?

var a = 5;

var b = 10;

tag`Hello ${ a + b } world ${ a * b }`;

// 等同于

tag(['Hello ', ' world ', ''], 15, 50);

?

上面代碼中，模板字符串前面有一個標識名tag，它是一個函數。整個表達式的返回值，就是tag函數處理模板字符串后的返回值。

轉載于:https://www.cnblogs.com/hongjingwu/p/8057373.html

總結

以上是生活随笔為你收集整理的[学习笔记]03.字符串的扩展的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。