【JavaScript入門】文字列の加工

　数値をそろえて一覧表を作ったり、ユーザーが入力した文字列の前後にある余分な空白を削ったり、Web アプリでは「ほんのひと手間」の文字列加工を頻繁に行います。JavaScript の String には、その作業をワンライナーで片付けるメソッドがそろっています。ここでは正規表現を使わない 単純加工系メソッド を整理し、実際の HTML+JavaScript サンプルで挙動を確認します。

１．長さをそろえる・繰り返す

メソッド役割典型的な使い道
padStart(len, fill = ' ')先頭を埋めて長さ len にする。0 埋めの連番、右寄せ
padEnd(len, fill = ' ')末尾を埋めて長さ len にする。表の列幅合わせ、左寄せ
repeat(n)文字列を n 回連結区切り線や疑似テンプレート

1.1. 例 ― スコア表を桁そろえ

const name = '山田';
const score = 87;
console.log(`${name.padEnd(6)}: ${String(score).padStart(3,'0')}`);
// => 山田    : 087

２．ホワイトスペースの除去

メソッド作用範囲主な用途
trim()先頭と末尾入力値の前後空白を一括除去
trimStart()先頭のみインデント調整
trimEnd()末尾のみ改行コードの整理
'  こんにちは  \n'.trim();      // "こんにちは"

３．大文字・小文字変換

メソッド説明
toUpperCase()全部大文字に変換
toLowerCase()全部小文字に変換
'Hello World'.toUpperCase(); // "HELLO WORLD"

４．応用サンプル ― ランキング表を整形して表示

ファイル名： ranking_formatter.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ランキング表示デモ</title>
<style>
pre { font-family: "Courier New", monospace; background:#f4f4f4; padding:8px;}
</style>
</head>
<body>
<h2>🍰 本日のスイーツ人気ランキング</h2>
<pre id="list">読み込み中...</pre>

<script>
(() => {
  // ダミーデータ
  const data = [
    { rank: 1, item: 'Shortcake', votes: 128 },
    { rank: 2, item: 'Mont Blanc', votes:  95 },
    { rank: 3, item: 'Cheesecake', votes:  87 },
    { rank: 10, item: 'Pudding', votes:  12 } // 桁合わせが必要
  ];

  // 列幅を決定
  const colRank  = 8;
  const colItem  = 16;
  const colVotes = 6

  // ヘッダー行
  const lines = [];
  lines.push(
    'Rank'.padEnd(colRank) +
    'Item'.padEnd(colItem) +
    'Votes'.padStart(colVotes)
  );

  // 本文行
  for (const {rank, item, votes} of data) {
    lines.push(
      String(rank).padEnd(colRank) +
      item.padEnd(colItem) +
      String(votes).padStart(colVotes)
    );
  }

  // 表示
  document.getElementById('list').textContent = lines.join('\n');
})();
</script>
</body>
</html>

ブラウザ表示

プログラム解説

  • padEnd() / padStart() で各列を固定幅にそろえ、Courier 系等幅フォントで表形式に見せている。
  • 列幅は変数 colRank などにまとめ、後から調整しやすくした。
  • 実データをループ処理するだけで、きれいなテキスト表が得られる。

５．その他の Tips

  1. repeat('─', 30) のような書式は ES2021 以降は使えず、'─'.repeat(30) と書く。
  2. padStart/End の第 2 引数は 空文字不可。空文字を渡すと RangeError。
  3. UTF‑16 1 単位で長さ計算するため、全角文字を含む場合は見た目幅とズレることがある。

まとめ

  • 長さ調整 は padStart と padEnd、繰り返し は repeat が基本。
  • 不要な空白は trim 系で除去してから比較・保存するとバグを減らせる。
  • 大文字小文字変換はロケール非依存の簡易チェックに便利。

　まずはサンプルをコピーして動かし、Console で padStart, trim などを単体テストしてみましょう。ほんの数行で UI を整える力を実感できるはずです。