JavaScriptで配列とか文字列を結合・連結させる方法アレコレ

JavaScriptを使っていると、頻繁にする処理

  • 文字列同士を連結させたり、
  • 配列同士を結合させたり・・

そういうときに便利なメソッドとか方法についてまとめてみました

知っていれば簡単だけど忘れがちなので、自分用メモも兼ねて紹介します。

1.文字列同士を連結させる方法

まずは2つ以上の文字列をくっつけたい場合のやり方

これには Array.join メソッドを使うのが一番楽で簡単です。

以下 Array,join  メソッドについての説明引用

arr.join([separator])

配列の全要素が連結された文字列です。 arr.length が 0 だった場合、空の文字列が返されます。

引用元 : Array.prototype.join() - JavaScript | MDN

配列 arr  に対して、区切り文字列 separator  で区切るという関数です。

ちなみに separator  を省略した場合、 コンマ( ,  ) が自動的に使われる模様

例えば文字列を結合してCSVにするコード例

それでこの Array.join  メソッド、いろいろ汎用的に使えて便利です。

文字列を連結してCSVとして出力とか、文字列をスペースで区切ってつなげたりとか・・・

 

例えば次、複数文字列をCSVにまとめるコード例

▼ このコードの出力結果

ちゃんとコンマ区切りで連結されてます。

もちろんCSV以外の用途もあるし、文字列連結するのに便利ですね。

2.配列同士を結合させる方法

これについては次の3つが使えます。

  • Array.forEachメソッド
  • Array.concatメソッド
  • $.mergeメソッド(jQueryの場合)

詳しくはコード例と共に紹介した次記事をチェック

別に配列を結合するという目的ならどれを使っても問題ありません。

 

ただ確実にやるなら Array.concat を使うのがベスト

以下 Array.concat  メソッドについての説明(引用)

var new_array = old_array.concat([value1[, value2[, ...[, valueN]]]])

concat は、メソッドを呼び出した this オブジェクトの要素に、与えられた引数の要素 (引数が配列である場合) または引数そのもの (引数が配列でない場合) が順に続く、新しい配列オブジェクトを生成します。

引用元 : Array.prototype.concat() - JavaScript | MDN

▼ 例えば2つの配列を連結して1つにするコード例

▼ このコードの実行結果

ちゃんとこっちも連結されてます。

配列同士の連結には Array.concat  を使うのがやっぱり確実だし楽かも

ちなみに文字列・配列を分割するには・・・

あと今紹介したのとは逆に・・・字列とか配列を分割する方法もあります

詳しくは次記事で解説した通り

こっちも知っておけば色々便利だと思います。

ここまでのまとめ

ということで、連結・結合のやり方まとめ

  • 文字列同士を連結する
    これには String.join  メソッドを使う。配列に対して strs.join();  みたいに実行することで ['a', "b", "c"]  のように連結された文字列ができる
  • 配列同士を結合する
    こっちは色々な方法が使えるが、 Array.concat  メソッドを使うのが確実&簡単。 arr1.concat(arr2);  のようにすれば2つの配列が結合できる

もちろん foreach とかで地道にやってもいいけど、あんまりメリット無いです。

こういう便利なメソッドは積極的に活用していきたいですね。

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください