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

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

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

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

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

このページの目次

１．文字列同士を連結させる方法
- 例えば文字列を結合してCSVにするコード例
２．配列同士を結合させる方法
ちなみに文字列・配列を分割するには・・・
ここまでのまとめ

１．文字列同士を連結させる方法

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

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

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

arr.join([separator])

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

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

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

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

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

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

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

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

/// CSV化したい文字列の集まり
var langs = [
  'ar', 'en', 'es', 'it', 'ja'
];

/// CSV生成＆出力
var CSV = langs.join();
console.log(CSV);

/// CSV化したい文字列の集まり

var langs = [

'ar', 'en', 'es', 'it', 'ja'

];

/// CSV生成＆出力

var CSV = langs.join();

console.log(CSV);

▼ このコードの出力結果

ar,en,es,it,ja

1	ar,en,es,it,ja

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

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

２．配列同士を結合させる方法

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

Array.forEachメソッド
Array.concatメソッド
$.mergeメソッド（jQueryの場合）

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

PisukeCode - Web開発まとめ

JavaScriptで配列を連結するのに使える３つのメソッドと使用例

https://pisuke-code.com/javascript-ways-to-combine-arrays

JavaScriptで配列同士をつなげたい場合、次の３つのメソッドが使えます。 Array.forEachメソッド Array.concatメソッド $.mergeメソッド（jQueryの場合）ここではこの３つを使って配列を連結する方法とコード例をまとめてみました。個人的にはconcatメソッドを使うのがシンプルで分かりやすいと思います。方法１. forEachメソッドで配列をつなげるforEachメソッドは配列の値を順に取り出すのによく使われるメソッドこのメソッドを使うことである配列に別の配列の値を１つずつ追加していくことができます。例えば次が配列同士...

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

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

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

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

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

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

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

var arr1 = ['ar', 'en', 'es'];
var arr2 = ['it', 'ja'];
 
var result = arr1.concat(arr2);
console.log(result);

var arr1 = ['ar', 'en', 'es'];

var arr2 = ['it', 'ja'];

var result = arr1.concat(arr2);

console.log(result);

▼ このコードの実行結果

[ 'ar', 'en', 'es', 'it', 'ja' ]

1	[ 'ar', 'en', 'es', 'it', 'ja' ]

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

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

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

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

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

PisukeCode - Web開発まとめ

JavaScriptで配列や文字列を分割する方法をまとめたよ

https://pisuke-code.com/js-ways-to-split-string-and-array

JavaScriptでコードを書くとき、次の２つのやり方によく悩みます。文字列をある規則で配列に分割するやり方配列をＮ等分の配列に分けるやり方やり方さえ分かってれば、どうってことないんですが・・・ということで、この２つのやり方をコード例付きでまとめてみました。１．文字列を分解して配列にするやり方これには String.split メソッドを使うのが手っ取り早いです。まず String.split メソッドについての説明は次の通り（引用）split() メソッドは、指定した separator 文字列を使って分割する箇所を決定し、文字列を複数の...

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

ここまでのまとめ

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

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