タイトルに書いた通りです。
JavaScriptでは文字列をStringで扱います。
これをforEachを使ってループを回す方法、
それがなかったので少し不便というか困りました。
でも工夫をすればなんとかできるので、
StringでforEachループを回す方法をまとめます。
このページの目次
なぜかStringにはforEachメソッドがない
JavaScriptではforEachメソッドが使えます。
配列だったり配列風のオブジェクトに対して…
当然Stringでも使えると思い込んでました。
▼ こういうコードを書きがち
|
1 2 3 4 5 |
const str = 'hello!!'; str.forEach(function(ch){ console.log('ch : ', ch); /// => NG! }); |
▼ 残念ながらエラーが出てしまう
|
1 |
VM1466:2 Uncaught TypeError: str.forEach is not a function at <anonymous>:2:5 |
最初このことに気づいた時は驚きました。
だって文字列型とか配列風オブジェクトの最たるものだし、当たり前のようにforEachメソッドが使えると思うじゃないですか。
でも無理なので代替案を考えます。
方法１．splitで分割 ⇒ forEachで回す
これは分かりやすい方法かもしれない。
文字列を空文字（''）で分割し、
その配列をforEachループするやり方です。
▼ 具体的には以下コードのように
|
1 2 3 4 5 |
const str = 'hello!!'; str.split('').forEach(function(ch){ console.log('ch : ', ch); /// => OK! }); |
▼ String.splitメソッドの解説
split() メソッドは、パターンを受け取り、String をパターン検索によって部分文字列の順序付きリストに分割し、これらの部分文字列を配列に入れ、その配列を返します。
引用元 ： https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/split
ワンクッション挟む必要があるんですね。
でも分かりやすさは一番だと思います。
方法2．スプレッド構文でforEachを回す
お次はES6以降で使える方法です。
スプレッド構文というのが導入されました。
▼ スプレッド構文とは何か
スプレッド構文 (...) を使うと、配列式や文字列などの反復可能オブジェクトを、0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、0 個以上のキーと値の組 (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。
引用元 ： https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax
文字列にも適用可能なのがうれしいです。
ということで以下のようなコードが書けます。
▼ スプレッド構文でforEachを回す
|
1 2 3 4 5 |
const str = 'hello!!'; [...str].forEach(function(ch){ console.log('ch : ', ch); /// => OK! }); |
無理やり配列にするという方法です。
これでもforEachループできるのでOK
他にも for...of を使ったループ方法も…
これはforEachを使わないやり方です。
文字列を for...of でループ処理できます。
▼ 例えば次のようなコード
|
1 2 3 4 5 |
const str = 'hello!!'; for(const ch of str){ console.log('ch : ', ch); /// => OK! } |
▼ ちなみに for...of について解説
for...of 文は、反復可能オブジェクトをソースとした一連の値を処理するループを実行します。反復可能オブジェクトには、 たとえば組み込みの Array, String, TypedArray, Map, Set, NodeList（およびその他の DOM コレクション）、同様に arguments オブジェクトや、ジェネレーター関数から生成されるジェネレーター、ユーザー定義の反復可能オブジェクトなどがあります。
引用元 ： https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of
ほとんどのブラウザで使えるので互換性も大丈夫。
少なくともforループを使うよりは楽です。
以上、StringをforEachで回すでした。ではまた
