大家好，我卡頌。

想必大家在業務中應該經常使用展開操作符(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。

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