展開操作符：一家人就這麼被拆散了

卡頌發表於2022-02-15

大家好，我卡頌。

想必大家在業務中應該經常使用展開操作符（Spread syntax），比如展開陣列：

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

// 6
console.log(sum(...numbers));

克隆物件：

const clone = { ...obj };

但你有沒有見過如下操作：

本文就來聊聊上述情況的成因。

歡迎加入人類高質量前端框架群，帶飛

展開操作符對字串的作用

iterable是ES2015增加的型別，展開操作符可以作用於iterable，將其展開為0到多個引數。Array、String這些常見的型別都屬於iterable。

iterable可以使用for..of語法遍歷，比如：

for (let i of 'abc') {
  console.log(i)
}
// a
// b
// c

Array屬於iterable很好理解，但是為什麼String也屬於iterable呢？

這是因為在ES2015之前，String基本實現了Array用於遍歷的所有要素，比如：

  • 擁有.length屬性
  • 可以通過下標訪問索引位置的字元

我們不討論這種實現是否正確，只是想說：用於遍歷時，String與Array體驗類似。

所以到了ES2015，當Array作為iterable支援for...of遍歷時，從體驗上來說，String也需要支援同樣的語法。

用展開操作符展開一家三口的結果：

用for...of遍歷，可以看到對應的Unicode字元：

那麼一家三口作為一個emoji，有什麼特殊的呢？

Emoji Sequence

這種由多個emoji組合成的emoji被稱為Emoji Sequence，他利用了文字可以組合形成這一特性。

比如，泰語就是可以組合形成的文字。

泰語裡的薩瓦迪卡（你好），寫為สวัสดีครับ。你會發現，在字元頭上有個帽子。

此外，泰語中的一些字元還有鞋子，比如ผู。

又或者又有帽子又有鞋子，比如：ผู้。

在泰語輸入法中，使用者依次輸入基本字元、帽子、鞋子，組合成需要的字元後再輸入結束字元，就拼湊成一個完整字元。

回到我們的一家三口，你會發現，展開後的第1、3項為零寬字元（Zero Width Joiner，簡稱zwj）：

從上述for...of遍歷的結果可知，這個零寬字元為\u200D。他通常用於排版。但Emoji Sequence把他拿去作為emoji之間的膠水。

換言之，你可以用\u200D將多個emoji組合成一個Emoji Sequence。

比如，爸爸，媽媽，小男孩可以組合成一家三口：

當然，小女孩也可以：

小姑娘與學士帽組合成戴學士帽的小姑娘：

總結

當了解組合方法後，你可以用現有emoji組合成全新的Emoji Sequence。

兩個爸爸帶孩子的家庭，兩個媽媽帶孩子的家庭，這都是可以嘗試的嘛～

相關文章