trim() / padStart() / padEnd() / repeat()

どれも元の文字列は変えません。新しい文字列が返ります。

trim() — 前後の空白を落とす

const input = '  あ  ';

console.log(JSON.stringify(input.trim()));
console.log(JSON.stringify(input.trimStart()));
console.log(JSON.stringify(input.trimEnd()));

console.log(JSON.stringify('\ta\n b　'.trim()));

落ちるのは前後だけです。真ん中は残ります。

const typed = ' はい ';

console.log(typed === 'はい');
console.log(typed.trim() === 'はい');

console.log('5'.padStart(3, '0'));
console.log('5'.padEnd(3, '0'));
console.log('ab'.padStart(5, 'xy'));

タブも改行も全角空白も落ちます。 ですが、真ん中の改行と半角空白はそのままです。

仕様では「空白類」と「行終端子」の両方が対象です。全角空白 U+3000 も空白類に含まれます。

入力を受け取ったら、まず trim() してから比べてください。

console.log('12345'.padStart(3, '0'));
console.log('12345'.padStart(3, '0').length);

console.log(JSON.stringify('a'.padStart(3)));

見た目が同じでも一致しません。 問い合わせ画面の照合でよく起きます。

padStart() / padEnd() — 桁を揃える

console.log('あ'.padStart(3, '0'));
console.log('5'.padStart(3, '0'));

console.log('ab'.repeat(3));
console.log(JSON.stringify('ab'.repeat(0)));

第1引数は足す数ではなく、仕上がりの長さです。 埋める文字は繰り返され、溢れた分は切られます。

元が長いと何もしない

try {
  'a'.repeat(-1);
} catch (error) {
  console.log(error.name + ': ' + error.message);
}

console.log('a   b\t\tc'.replace(/\s+/g, ' '));

切り詰めてはくれません。 長さを必ず揃えたいなら、 slice() と組み合わせてください。 → 文字列を決まった文字数で切り詰める

第2引数を省くと半角空白

日本語では桁が揃わない

どちらも3文字です。 ですが、等幅の表示でも あ は2文字分の幅を取ります。 見た目の桁は揃いません。

見た目で揃えたいなら、文字数ではなく表示幅で数える必要があります。 数える単位そのものにも注意が要ります。 → 文字を正しく数える

repeat() — 繰り返す

負の数を渡すと落ちます。

計算した値を渡すときは、負にならないか確かめてください。

使い分け

真ん中の連続した空白を1つにするなら、置換です。

→ String.prototype.replace() と replaceAll()

まとめ

• どれも元の文字列は変えない。返り値を使う
• trim() は前後だけ。タブ・改行・全角空白も落ちる
• 入力の照合は必ず trim() してから
• padStart() の引数は仕上がりの長さ。元が長いと何もしない
• 日本語では文字数を揃えても見た目の桁は揃わない
• repeat() に負の数を渡すと RangeError