【JavaScript】split()メソッドでキーと値を含む文字列から配列オブジェクトを作成する方法

はじめに

JavaScriptでは、特定の形式で整形された文字列をデータ構造へ変換したい場面がよくあります。本記事では、キーとプロパティ値を含む特殊な文字列を、String.prototype.split()メソッドを活用してオブジェクトの配列へ変換する方法を解説します。

前提となる入力データ

まず、次のような特殊な形式の文字列が与えられたと仮定しましょう。

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

この文字列を、以下のようなオブジェクトの配列へ変換することを目標とします。

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

変換ルール

文字列を解析する際には、以下の3つのルールに従います。

• \n（改行）は、1つのオブジェクトの終わりを表します。
• 半角スペース（空白）は、オブジェクト内における1組のキー／値ペアの終わりを表します。
• カンマ「,」は、キーと値を区切る役割を果たします。

実装コード

上記のルールに基づいた実装は以下の通りです。処理の流れとしては、まず改行で分割し、次にスペースで分割、最後にカンマでキーと値に分離しています。

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));

実行結果

このコードをコンソールで実行すると、次のような出力が得られます。

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

ご覧の通り、すべての値が文字列として格納されています。目標とする出力のように数値や真偽値として扱いたい場合は、値を適切な型へ変換する処理を追加するとよいでしょう。

応用：値の型を自動的に変換する

文字列のままではなく、数値や真偽値として取得したい場合は、以下のような型変換関数を組み合わせます。

const convertValue = value => {
    if (value === "True") return true;
    if (value === "False") return false;
    if (!isNaN(value) && value.trim() !== "") return Number(value);
    return value;
};

const stringToArrayWithTypes = 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]: convertValue(value)
            };
        });
    });
};

console.log(stringToArrayWithTypes(str));

このコードを実行すると、「True」「False」は真偽値へ、数値として有効な文字列は数値型へと自動的に変換され、期待通りのデータ構造が得られます。

まとめ

split()メソッドとmap()を組み合わせることで、区切り文字のルールに従った文字列を簡単にオブジェクトの配列へ変換できます。さらに型変換の処理を加えれば、APIレスポンスやログファイルの解析など、実務でも応用できる汎用的なテクニックとなります。