J 筆記 - String to Array

J 筆記 - Convert String to Character Array

在處理資料不管是在 Ruby、JS 當中，常常需要把一整坨的資料做切開後，再來做應用，而在 JS 中實作的方式有好幾種，但這些方法之中的差異在哪邊，就來實作幾個範例吧！

1
2
const Chester = 'Chester'
// ['C', 'h', 'e', 's', 't', 'e', 'r']

四種 String -> Character Array 方法

將資料拆開的方法共有四種，隨著 ES6 的廣泛應用，除了常見的 split 還有許多其他的寫法可以解決這個問題，雖然可能有些不太常用到，但至少別人的程式碼當中如果出現，你可以馬上理解這段 code 在幹嘛…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const Chester = 'Chester'
// ['C', 'h', 'e', 's', 't', 'e', 'r']

// 選項1 
Chester.split(''); 
// 選項2 
[... Chester]; 
// 選項3 
Array.from(Chester); 
// 選項4 
Object.assign([]，Chester); 

// 結果：
// ['C', 'h', 'e', 's', 't', 'e', 'r']

情況一：切割每個字

1
2
3
4
5
6
7
8
const Chester = '查斯特';
const usingSplit = Chester.split('');
const usingSpread = [... Chester];
const usingArrayFrom = Array.from(Chester);
const usingObjectAssign = Object.assign([], Chester);

// 結果：
// ['查', '斯', '特']

情況二：特定符號

如果是要把逗號、分號這類型的資料分開，那 split 會是最好的辦法（這也是最常用的方式）！

1
2
3
4
5
const Chester = 'Chester-Tang';
const usingSplit = Chester.split('-');

// 結果：
// ['Chester', 'Tang']

其他的方法跟情況一得到的答案是相同的

1
2
3
4
5
6
7
const Chester = 'Chester-Tang';
const usingSpread = [... Chester];
const usingArrayFrom = Array.from(Chester);
const usingObjectAssign = Object.assign([], Chester);

// 結果：
// ['C', 'h', 'e', 's', 't', 'e', 'r', '-', 'T', 'a', 'n', 'g']

情況三：Emojis

如果含有 Emojis 的話，Spread、ArrayFrom 是比較好的做法

1
2
3
4
5
6
const Chester = 'Chester😋';
const usingSpread = [... Chester];
const usingArrayFrom = Array.from(Chester);

// 結果：
// ['C', 'h', 'e', 's', 't', 'e', 'r', '😋']

如果用 split、Object.assign 會發生以下錯誤

1
2
3
4
5
6
const Chester = 'Chester😋';
const usingSplit = Chester.split('');
const usingObjectAssign = Object.assign([], Chester);

// 結果：
// ['C', 'h', 'e', 's', 't', 'e', 'r', '�', '�']

這是因為 grapheme-splitter UTF-8 和 UTF-16 不同的關係所造成的。’😋’ 它實際上是由 2 個字組成，而不是我們認為的 1 個。

1
'😋'.length; // 2

TypeScript 中的 Object.assign([], Chester)，在這邊其實還有其他的雷，但前提是你有在寫 TS

參考資料