JavaScriptで配列の全要素を指定した文字列で挟んで連結する方法(forループ・map活用)

本記事では、「文字列または数値の配列」と「1つの文字列」を引数に受け取り、配列内のすべての要素の前後にその文字列を付けて連結した結果を返す関数の作り方を解説します。

やりたいこと

たとえば、次のような呼び出しを行った場合を考えてみましょう。

applyText([1, 2, 3, 4], 'a');

この場合、期待される戻り値は 'a1a2a3a4a' です。つまり、各要素の前に文字列 'a' を付け、最後にもう一度 'a' を末尾に追加した形になります。

map()メソッドを使った実装

このような処理には、従来のforループよりも配列のmap()メソッドを使う方が簡潔で読みやすいコードになります。各要素を変換してからjoin()で連結する流れが自然に書けるためです。

サンプルコード

const numbers = [1, 2, 3, 4];
const word = 'a';

const applyText = (arr, text) => {
    const appliedString = arr.map(element => {
        return `${text}${element}`;
    }).join("");
    return appliedString + text;
};

console.log(applyText(numbers, word));

実行結果

コンソールには次のように出力されます。

a1a2a3a4a

コードのポイント

• map()で各要素の直前に指定した文字列(text)を付加した新しい配列を作成します。
• join("")で配列の要素を区切り文字なしで1つの文字列に連結します。
• 最後に+ textで末尾にも同じ文字列を追加し、要素全体を文字列で挟んだ形にしています。

forループを使った実装

あえてforループで書きたい場合は、次のように実装できます。

const applyTextWithLoop = (arr, text) => {
    let result = '';
    for (let i = 0; i < arr.length; i++) {
        result += `${text}${arr[i]}`;
    }
    return result + text;
};

console.log(applyTextWithLoop([1, 2, 3, 4], 'a')); // a1a2a3a4a

どちらの方法でも同じ結果が得られますが、宣言的で意図が伝わりやすいmap() + join()の組み合わせが、現代のJavaScriptでは推奨される書き方です。