Javascript

【Javascript】文字列を1文字ずつ配列に変換する方法

文字列を1文字ずつHTMLタグで囲みたかったので、定義した文字列を配列に変換しmap()でタグを加えてみます。文字列を配列に変換する方法を2種類紹介します。

変換する方法

String.split() を使う

split()''空文字列を渡すことで文字列を配列に分割することができます。

'あいうえお'.split('') 

-> (5) ["あ", "い", "う", "え", "お"]

スプレッド演算子を使う

スプレッド演算子(spread operator)を使っても同じように文字列を配列に分割できます。(Typescriptを使用している場合、設定によってはエラー判定になります)

[...'あいうえお']

-> (5) ["あ", "い", "う", "え", "お"]

(例)文字列を1文字ずつ特定のタグでラップした JSX を返す

文字列を1文字ずつ<span>で囲んでみます。例は JSX なので、ループ時に必要な key 属性を付与しています。

[...'あいうえお'].map((v, k) => <span key={k}>{v}</span>)

->
<span>あ</span>
<span>い</span>
<span>う</span>
<span>え</span>
<span>お</span>

関連記事

Leave a Reply