JavaScriptで文字列を繰り返したり、配列を特定の値で埋める

JestやStorybookで、テストや表示用に長い文字列や配列を用意するがある。

リテラルで書いていた同僚に、コードレビューで「こんなやり方ができるよ」と教えたら感心されたのでメモ。

String.repeat(繰り返し回数) で繰り返し可能。

console.log('a'.repeat(5)) // aaaaa
console.log('abc'.repeat(2)) // abcabc

左埋めは String.padStart(桁数, 埋める文字列) で、右埋めは String.padStart(桁数, 埋める文字列) で文字埋め可能。埋める文字列を省略すると、半角スペースで埋められる。

console.log('123'.padStart(5, '0')) // 00123
console.log('123'.padEnd(5, '0')) // 12300

Array.fill(埋める値) で、配列の値を埋めることができる。

任意の長さの配列を作るには、長さを指定したコンストラクタを使えばいい。

console.log(new Array(2).fill(1)) // [1, 1] 

// new は省略可能
console.log(Array(2).fill('a')) // [a, a]

個人的にお気に入りの eslint-plugin-unicorn を使っていると、no-new-arrayルールでArrayコンストラクタ実行が怒られるため、 Array.from({length: 長さ}) を使用。

console.log(Array.from({ length: 2 }).fill(1)) // [1, 1]

ただ、この書き方だと、TypeScriptでは Array.from および fill の戻り値が uknown[] になる。

型指定が必要な場合、 Array.from<型>(...) のように記述すればいい。

const strings: string[] = Array.from<string>({ length: 2 }).fill('a')

配列を繰り返したい場合、 Array.fill(繰り返したい配列).flat() で可能。

console.log(Array(2).fill([1, 2]).flat()) // [1, 2, 1, 2]

TypeScriptで Array.from に型指定する場合、繰り返したい配列の型を指定する必要がある。

const numbers: number[] = Array.from<number[]>({ length: 2 })
  .fill([1, 2, 3])
  .flat()

console.log(numbers) // [1, 2, 3, 1, 2, 3]

Storybookであればまだいいが、ユニットテストで長い文字列が使われていると、念のため文字数を数えたりと、本来注視しなくていい部分を確認する必要が生じる。

文字数制限のテストなどで、n文字以上であればエラーとなることをテストしたい場合、例えば n = 21 であれば 'a'.repeat(21) のように書かれているほうが個人的には読みやすい。

レビュアー目線からはこんな書き方のほうがありがたいと思い共有したが、同僚からも楽に書けるということで概ね好評だった。

文字列の左右埋めや、 Array.flat() はちょこちょこプロダクトコードでも使うので、覚えておいて損はないと思う。