JavaScriptで配列を結合して空白をハイフンに置き換えた文字列を作成する方法

JavaScriptで、文字列の配列を受け取り、配列内のすべての文字列を結合したうえで、空白をハイフン「-」に置き換えて、その結果の文字列を返す関数を作成する必要があります。

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

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

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

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

それでは、この関数のコードを書いていきましょう。

実装例

まずは、ループ処理を使って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));

コードの解説

このコードの流れは以下の通りです。

• まず join() メソッドを使い、配列内のすべての文字列を1つの文字列に結合します。
• 結合された文字列に対してループ処理を行い、1文字ずつチェックします。
• 空白文字が見つかった場合、直前の文字が存在しかつ空白でなければ、代わりにハイフン「-」を追加します。これにより、連続する空白が複数のハイフンになることを防げます。
• 空白以外の文字はそのまま結果に追加していきます。

出力結果

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

QA-testing-promotion-Twitter-Facebook-Test

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

上記のロジックは、正規表現を使えばさらにシンプルに書くこともできます。

const joinArr = arr => arr.join('').replace(/\s+/g, '-').replace(/^-+|-+$/g, '');
console.log(joinArr(arr)); // QA-testing-promotion-Twitter-Facebook-Test

ここでは /\s+/g パターンにより「1つ以上連続する空白」をまとめてハイフンに置換しています。また、先頭や末尾に余分なハイフンが残るケースにも対応できるよう、2つ目の replace() で前後のハイフンを除去しています。

状況に応じて、可読性の高いループ処理か、簡潔な正規表現ベースの書き方を選択するとよいでしょう。