JavaScript で配列の文字列を prefix 付きで連結

配列にある複数の文字列の頭に同じ文字列 (prefix) を付けて連結したい事が時々あります。
jQuery オブジェクトを複数のクラス指定で作りたい場合などです。

もちろん for や forEach を使えば可能な事なのですが、やりたい事の割に記述が冗長すぎる気がしたので、他の方法はないか考えてみました。
結論から言えば、完璧ではないものの可能です。

JavaScript での文字列の連結は join() で行えます。これは PHP の implode 関数や、Perl の join 関数に相当するメソッドです。
join() は区切り文字を挟んで連結することは出来ますが、これだけでは prefix は付けられません。

var array = ['aaa', 'bbb'];
var string = array.join(',');

// 結果(string)
// aaa,bbb

それならば、頭に空文字列の要素を追加して prefix 込みの区切り文字で連結すればいけるんじゃないかな？と考えたのが次の例です。concat() で空文字列と配列を連結した後、prefix 込みで join() して、最後に頭の不要な文字を消去してます。

var string = [''].concat(array).join(',.prefix_').slice(1);

// 結果(string)
// .prefix_aaa,.prefix_bbb

できた( ｰ`дｰ´)ｷﾘｯ
…いや、できたことはできたのですが、何をやってるか少し分かり難いし、slice() でのカットは区切り文字の文字数に依存するので余り宜しくない。
うーん、と考えた結果、最終的にこれに落ち着きました。

var string = '.prefix_' + array.join(', .prefix_');

// 結果(string)
// .prefix_aaa, .prefix_bbb

できた(｀・ω・´)ｼｬｷｰﾝ
同じ prefix を2箇所指定しないといけない為、記述の美しさの点では劣りますが、文字数や要素が少なく済み、見通しが良いのが利点です。やってることが単純なので、処理も速いことでしょう。
jQuery オブジェクトにしたい場合は下記のように$()で囲ってしまえば、余計な変数も作らずに済みます。

var obj = $('.prefix_' + array.join(', .prefix_'));

関連記事

• JavaScript で配列の文字列を suffix 付きで連結