JavaScriptで文字列を配列に変換する方法｜split()メソッドの実践的な使い方

はじめに

JavaScriptでは、特定の形式を持つ文字列をオブジェクトの配列へ変換したい場面がよくあります。本記事では、String.prototype.split()メソッドを活用して、構造化された文字列を配列に変換する方法を具体的なコード例とともに解説します。

変換対象の文字列

まず、次のような特殊な形式の文字列を想定します。

const str = "Integer,1 Float,2.0\nBoolean,True Integer,6\nFloat,3.66 Boolean,False";

この文字列を、split()メソッドを使って以下のような配列構造へ変換することを目標とします。

const arr = [
    {
        "Integer": 1,
        "Float": 2.0
    },
    {
        "Boolean": true,
        "Integer": 6
    },
    {
        "Float": 3.66,
        "Boolean": false
    }
];

変換のルール

文字列を正しく解析するために、以下の3つのルールに従います。

• \n（改行）： オブジェクトの終わりを示す区切り文字として扱う
• 半角スペース： オブジェクト内のキーと値のペアを区切る
• カンマ（,）： キーと値を分離する

実装コード

それでは、これらのルールに基づいて関数を実装していきましょう。

const str = "Integer,1 Float,2.0\nBoolean,True Integer,6\nFloat,3.66 Boolean,False";

const stringToArray = str => {
    const strArr = str.split('\n');
    return strArr.map(el => {
        const elArr = el.split(' ');
        return elArr.map(elm => {
            const [key, value] = elm.split(',');
            return {
                [key]: value
            };
        });
    });
};

console.log(stringToArray(str));

コードの解説

この関数の処理は、大きく分けて3段階で構成されています。

1. 第1段階： split('\n')によって文字列を改行ごとに分割し、各行が1つのオブジェクトに対応する配列を生成します。
2. 第2段階： map()で各行を処理し、split(' ')で半角スペースごとに分割してキーと値のペアを取り出します。
3. 第3段階： さらにsplit(',')で各ペアを分割し、分割代入でキーと値を取得。計算プロパティ名（[key]）を使ってオブジェクトを動的に生成します。

実行結果

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

[
    [ { Integer: '1' }, { Float: '2.0' } ],
    [ { Boolean: 'True' }, { Integer: '6' } ],
    [ { Float: '3.66' }, { Boolean: 'False' } ]
]

補足：値の型変換について

上記の出力では、すべての値が文字列型として扱われている点に注意してください。冒頭の目標出力のように、数値や真偽値へ変換したい場合は、追加の変換処理が必要です。たとえば、値が「true」「false」ならBoolean型へ、「1」のような数値ならNumber型へ変換するロジックを組み込むことで、期待どおりのデータ構造を実現できます。

split()メソッドは単純ながら強力な文字列操作ツールです。ネストしたデータ構造への変換にも応用できるので、CSVパースなどさまざまな場面でぜひ活用してみてください。