セパレータ区切りの文字列をJavaScriptでオブジェクトの配列に変換する方法

JavaScriptでは、特定のセパレータ（区切り文字）で連結された文字列を、扱いやすいデータ構造へ変換したい場面がよくあります。本記事では、「|」で区切られた文字列を、キーと値のペアを持つオブジェクトの配列へ変換する方法を解説します。

問題の概要

例として、次のような文字列が与えられたとします。

const str = 'Option 1|false|Option 2|false|Option 3|false|Option 4|true';

この文字列は、「オプション名」と「真偽値」が交互に「|」で連結された形式になっています。ここで求められるのは、この文字列を入力として受け取り、「|」で分割しながらオプションとその値をペア化し、以下のようなオブジェクトの配列に変換する関数を記述することです。

const output = [
  {
    "option": "Option 1",
    "value": false
  },
  {
    "option": "Option 2",
    "value": false
  },
  {
    "option": "Option 3",
    "value": false
  },
  {
    "option": "Option 4",
    "value": true
  }
];

実装例

文字列を split('|') で配列に分解し、2要素ずつペアとして読み進めることで実現できます。値の部分は JSON.parse() を使って真偽値に変換している点がポイントです。

const str = 'Option 1|false|Option 2|false|Option 3|false|Option 4|true';

const stringToObject = (str = '') => {
  const res = [];
  for (let i = 0, a = str.split('|'); i < a.length; i += 2) {
    const option = a[i], value = JSON.parse(a[i + 1]);
    res.push({ option, value });
  }
  return res;
};

console.log(stringToObject(str));

コードの解説

• split('|'): 文字列を「|」を基準に分割し、['Option 1', 'false', 'Option 2', 'false', ...] のような配列を生成します。
• i += 2: ループカウンタを2ずつ増やすことで、「オプション名」と「値」のペアごとに処理を進めます。
• JSON.parse(): 文字列の 'false' / 'true' を実際の真偽値 false / true に変換します。
• ショートハンドプロパティ: { option, value } と書くことで、変数名をそのままキーとしたオブジェクトを簡潔に生成できます。

出力結果

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

[
  { option: 'Option 1', value: false },
  { option: 'Option 2', value: false },
  { option: 'Option 3', value: false },
  { option: 'Option 4', value: true }
]

補足：より安全な実装について

上記のコードは入力が正しい形式であることを前提としています。実運用では、配列長が奇数の場合や値が不正な場合への対処として、a[i + 1] の存在チェックや try-catch によるエラーハンドリングを追加するとより堅牢になります。また、値が真偽値以外（数値や文字列など）になる可能性がある場合は、JSON.parse() を条件付きで使うか、型に応じた変換処理を検討してください。