JavaScriptで配列を電話番号形式の文字列に変換する方法

問題

ちょうど10個の正の整数を含む配列 arr を受け取るJavaScript関数を作成することを考えます。

この関数は、配列の要素を一般的な電話番号の形式である「(XXX) XXX-XXXX」の文字列に組み立てて返す必要があります。

例えば、関数への入力が以下の場合を考えてみましょう。

入力

const arr = [9, 8, 7, 6, 5, 4, 3, 2, 1, 0];

出力

const output = '(987) 654-3210';

コード例

以下がその実装コードです。

const arr = [9, 8, 7, 6, 5, 4, 3, 2, 1, 0];
const createNumber = (arr = []) => {
    let res = '';
    arr = arr.map(String);
    res += `(${arr[0]+arr[1]+arr[2]}) `;
    res += `${arr[3] + arr[4] + arr[5]}-`;
    res += arr[6] + arr[7] + arr[8] + arr[9];
    return res;
};
console.log(createNumber(arr));

出力結果

(987) 654-3210

コードの解説

このコードのポイントは、Array.prototype.map() メソッドを使って、配列内のすべての数値をあらかじめ文字列に変換しておく点です。これを行わないと、後の連結処理で数値同士が足し算されてしまい、意図した結果になりません。

その後、テンプレートリテラルを活用しながら、以下の手順で電話番号形式の文字列を組み立てています。

• 最初の3つの要素（インデックス0〜2）を括弧 () で囲む
• 次の3つの要素（インデックス3〜5）を追加し、ハイフン - で区切る
• 最後の4つの要素（インデックス6〜9）を末尾に連結する

このように、配列操作と文字列連結を組み合わせることで、任意の10桁の数字配列を簡単に電話番号形式へ整形できます。応用として、国際電話の形式や別の区切り文字への対応なども、同じ考え方で柔軟に実装できます。