ES6——字符串的擴展

參考鏈接:https://es6.ruanyifeng.com/#docs/string

1、字符串的unicode表示

採用\uxxxx形式表示一個字符,其中xxxx表示字符的 Unicode 碼點.

只限於碼點在\u0000~\uFFFF之間的字符。超出這個範圍的字符,必須用兩個雙字節的形式表示

console.log("\u0061");
// a

(1)如果直接在\u後面跟上超過0xFFFF的數值(比如\u20BB7),JavaScript 會理解成\u20BB+7。由於\u20BB是一個不可打印字符,所以只會顯示一個空格,後面跟着一個7

(2)將碼點放入大括號,就能正確解讀該字符

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

2、字符串的遍歷器接口

(1)字符串可以被for...of循環遍歷

for (let char of 'hello') {
  console.log(char)
}
// h e l l o

3、JSON.stringfy()改造

根據標準,JSON 數據必須是 UTF-8 編碼。但是,現在的JSON.stringify()方法有可能返回不符合 UTF-8 標準的字符串

UTF-8 標準規定,0xD8000xDFFF之間的碼點,不能單獨使用,必須配對使用。比如,\uD834\uDF06是兩個碼點,但是必須放在一起配對使用,代表字符𝌆。這是爲了表示碼點大於0xFFFF的字符的一種變通方法。單獨使用\uD834\uDFO6這兩個碼點是不合法的,或者顛倒順序也不行,因爲\uDF06\uD834並沒有對應的字符。

JSON.stringify()的問題在於,它可能返回0xD8000xDFFF之間的單個碼點。

爲了確保返回的是合法的 UTF-8 字符,ES2019 改變了JSON.stringify()的行爲。如果遇到0xD8000xDFFF之間的單個碼點,或者不存在的配對形式,它會返回轉義字符串,留給應用自己決定下一步的處理

4、模板字符串

傳統js輸出模板

$('#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)是增強版的字符串,用反引號(`)標識。它可以當作普通字符串使用,也可以用來定義多行字符串,或者在字符串中嵌入變量

注意:在字符串中嵌入變量在實際開發中會用到

// 字符串中嵌入變量
let name = "xiaoming";
console.log(`I am ${name}`);
//I am xiaoming

(1)使用模板字符串表示多行字符串,所有的空格和縮進都會被保留在輸出之中

(2)模板字符串中嵌入變量,需要將變量名寫在${}之中

(3)大括號內部可以放入任意的 JavaScript 表達式,可以進行運算,以及引用對象屬性

let x = 1;
let y = 2;
`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"

`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"

let obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// "3"

(4)模板字符串之中還能調用函數

function fn() {
  return "OK";
}

`${fn()}`
//OK

(5)如果模板字符串中的變量沒有聲明,將報錯

// 變量a沒有聲明
let msg = `Hello, ${a}`;
//ReferenceError: a is not defined

(6)模板字符串甚至還能嵌套

5、標籤模板

模板字符串可以緊跟在一個函數名後面,該函數將被調用來處理這個模板字符串。這被稱爲“標籤模板”功能(tagged template)

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

alert`hello`
// 等同於
alert(['hello'])

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

6、模板字符串限制

標籤模板裏面,可以內嵌其他語言。但是,模板字符串默認會將字符串轉義,導致無法嵌入其他語言

ES2018 放鬆了對標籤模板裏面的字符串轉義的限制。如果遇到不合法的字符串轉義,就返回undefined,而不是報錯,並且從raw屬性上面可以得到原始字符串

注意,這種對字符串轉義的放鬆,只在標籤模板解析字符串時生效,不是標籤模板的場合,依然會報錯

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章