JavaScriptで文字列配列を結合し、空白をハイフン「-」に置き換える方法

はじめに

今回は、文字列の配列を受け取り、配列内のすべての文字列を連結したうえで、空白をハイフン「-」に置き換えて結果の文字列を返すJavaScript関数を作成します。

たとえば、次のような配列があったとします。

const arr = ["QA testing promotion ", " Twitter ", "Facebook ", "Test"];

この場合、期待される出力は以下のとおりです。

const output = "QA-testing-promotion-Twitter-Facebook-Test";

実装のポイント

まず join('') メソッドを使って配列内のすべての文字列を1つの文字列に連結します。その後、連結された文字列を先頭から順に走査し、空白文字を検出したときは「直前の文字が空白でない場合のみ」ハイフン「-」を追加します。これにより、連続する複数の空白が含まれていても、余分なハイフンが挿入されるのを防ぐことができます。

コード例

以下が実際のコードです。

const arr = ["QA testing promotion ", " Twitter ", "Facebook ", "Test"];
const joinArr = arr => {
    const arrStr = arr.join('');
    let res = '';
    for(let i = 0; i < arrStr.length; i++){
        if(arrStr[i] === ' '){
            if(arrStr[i-1] && arrStr[i-1] !== ' '){
                res += '-';
            };
            continue;
        }else{
            res += arrStr[i];
        };
    };
    return res;
};
console.log(joinArr(arr));

出力

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

QA-testing-promotion-Twitter-Facebook-Test

正規表現を使ったより簡潔な書き方

ループ処理を書かずに、正規表現を組み合わせることで同じ結果を短いコードで実現することもできます。join('') で連結した後、trim() で両端の空白を除去し、replace(/\s+/g, '-') で連続する空白（スペース・タブ・改行など）をまとめてハイフンに置換します。

const arr = ["QA testing promotion ", " Twitter ", "Facebook ", "Test"];
const output = arr.join('').trim().replace(/\s+/g, '-');
console.log(output); // QA-testing-promotion-Twitter-Facebook-Test

どちらの方法でも目的の結果は得られますが、実務ではコード量が少なく可読性の高い正規表現版が好まれることが多いです。ただし、空白以外にも特定の記号だけを置換したいなど細かい制御が必要な場合は、ループによる処理の方が柔軟に対応できます。