ES6中對字符串處理的優點


1、字符的Unicode表示法

ES6之前 Unicode 只能表示 \u0000 -- \uFFFF 之間的字符。
ES6可以表示超過這個 范圍的unicode字符 如

//原來 ES6 之前
"\uD842\uDFB7"
// "𠮷"

"\u20BB7"
// " 7"

// ES6 

"\u{20bb7}"
// "𠮷"

//🚀
"\u{1F680}" === "\uD83D\uDE80"

好多中文是的Unicode是超過 \uFFFF 的,有了這種表示,我們就可以用一個字節 表示表示一個字符而不像原來用兩個字節。

JavaScript 的6中表示一個字符的方法

'\z' === 'z'  // true
'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true
'\u{7A}' === 'z' // true

2、字符串的遍歷接口

for...of

他的優點
普通的for循環,不能識別編碼大於 '\uffff' 的碼點字符會把它拆分為兩個

//普通遍歷會把超表示范圍的碼點 是被為兩個,拆分后如果是不可打印字符會輸出空
let text = String.fromCodePoint(0x20BB7)
for (let i = 0;i < text.length; i++){
    console.log(text[i]);
}
//"�"
//"�"
 
// 用 for...of
for (let i of text) {
  console.log(i);
}
// "𠮷"

3、直接輸入 U+2028 和 U+2029(分行符 和 分段符)

JavaScript 規定有5個字符,不能在字符串里面直接使用,只能使用轉義形式。
U+005C:反斜杠(reverse solidus)
U+000D:回車(carriage return)
U+2028:行分隔符(line separator)
U+2029:段分隔符(paragraph separator)
U+000A:換行符(line feed)
例如想輸出 反斜杠\ 只能先轉意 \ 或者 \005c

4、JSON.stringify() 的改造

根據標准,JSON 數據必須是 UTF-8 編碼。但是,現在的JSON.stringify()方法有可能返回不符合 UTF-8 標准的字符串。
具體來說,UTF-8 標准規定,0xD800到0xDFFF之間的碼點,不能單獨使用,必須配對使用。比如,\uD834\uDF06是兩個碼點,但是必須放在一起配對使用,代表字符𝌆。這是為了表示碼點大於0xFFFF的字符的一種變通方法。單獨使用\uD834和\uDFO6這兩個碼點是不合法的,或者顛倒順序也不行,因為\uDF06\uD834並沒有對應的字符。
JSON.stringify()的問題在於,它可能返回0xD800到0xDFFF之間的單個碼點。
JSON.stringify('\u{D834}') // "\u{D834}"
為了確保返回的是合法的 UTF-8 字符,ES2019 改變了JSON.stringify()的行為。如果遇到0xD800到0xDFFF之間的單個碼點,或者不存在的配對形式,它會返回轉義字符串,留給應用自己決定下一步的處理。

JSON.stringify('\u{D834}') // ""\uD834""
JSON.stringify('\uDF06\uD834') // ""\udf06\ud834""

5、字符串模版
用反引號包裹

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入變量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

字符串模版中要包含 反引號 ` 就需要用轉移字符

let greeting = `\`Yo\` World!`;

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

$('#list').html(`
<ul>
  <li>first</li>
  <li>second</li>
</ul>
`);

字符模版中可以嵌入變量 ,不過要用 ${var} 包裹,

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}.`);
  }
}

字符模版中可以寫表達式
字符串模板中可以調用函數

function fn() {
  return "Hello World";
}

`foo ${fn()} bar`

字符串模板可以嵌套

const tmpl = addrs => `
  <table>
  ${addrs.map(addr => `
    <tr><td>${addr.first}</td></tr>
    <tr><td>${addr.last}</td></tr>
  `).join('')}
  </table>
`;

6、標簽模板

alert `123`
//等同於
alert(123)

字符串模板緊跟在一個函數名之后。形成一個函數調用的功能。

[字符串擴展](http://es6.ruanyifeng.com/#docs/string 字符串擴展)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM