JavaScriptで配列の各要素に従って文字列を分割する方法

JavaScriptでは、文字列と数値の配列が与えられ、その配列の各要素に指定された長さに従って文字列を分割したいケースがあります。例えば、以下のような入力と出力を考えてみましょう。

入力例

const string = 'Javascript splitting string by given array element';
const arr = [2, 4, 5, 1, 3, 1, 2, 3, 7, 2];

出力例

['Ja','vasc','ript ','s','pli','t','ti','ng ','string ','by']

この例では、配列の最初の要素「2」に従って先頭から2文字を切り出し、次の要素「4」に従ってさらに4文字を切り出す、という処理を繰り返しています。つまり、配列の各要素が「切り出す文字数」を表しているわけです。

この処理を実現するために、splitAtPosition という関数を作成します。この関数は文字列と配列を受け取り、Array.prototype.reduce() メソッドを活用して分割結果の配列を返します。

reduce() を使うことで、アキュムレータ（累積値）として「現在の切り出し開始位置」と「これまでに生成した部分文字列の配列」を保持しながら、配列の要素を順番に処理していくことができます。

実装コード

const string = 'Javascript splitting string by given array element';
const arr = [2, 4, 5, 1, 3, 1, 2, 3, 7, 2];

const splitAtPosition = (str, arr) => {
  const newString = arr.reduce((acc, val) => {
    return {
      start: acc.start + val,
      newArr: acc.newArr.concat(str.substr(acc.start, val))
    }
  }, {
    start: 0,
    newArr: []
  });
  return newString.newArr;
};

console.log(splitAtPosition(string, arr));

コードの解説

• 初期値として { start: 0, newArr: [] } を設定します。start は次に切り出す位置、newArr は結果を格納する配列です。
• 各ループで str.substr(acc.start, val) により、開始位置 start から val 文字分の部分文字列を取り出します。
• 取り出した文字列を newArr に追加し、start を val 分だけ進めます。
• すべての要素を処理し終えたら、newString.newArr を返します。

なお、substr() は現在では非推奨（deprecated）とされているため、新しいコードでは slice() や substring() の使用が推奨されます。同様の処理は str.slice(acc.start, acc.start + val) と書き換えることで実現できます。

実行結果

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

[
    'Ja', 'vasc',
    'ript ', 's',
    'pli', 't',
    'ti', 'ng ',
    'string ', 'by'
]

このように、reduce() を使えば、配列の各要素で指定された文字数ごとに文字列を簡潔かつ効率的に分割することができます。