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 的話,SpreadArrayFrom 是比較好的做法

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

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

如果用 splitObject.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-8UTF-16 不同的關係所造成的。’😋’ 它實際上是由 2 個字組成,而不是我們認為的 1 個。

1
'😋'.length; // 2

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

參考資料