VIDEO LESSON

JavaScriptのString.prototype.padStart()の使い方：引数・戻り値・実例と注意点の解説動画

再生時間 8:12動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回はパッドスタートを紹介します。
0:03これは、文字列の先頭を別の文字で埋めて、指定した長さにそろえるメソッドです。
0:09たとえば数字の七を、ゼロゼロ七のように三桁表示にしたい、そんな場面で活躍します。
0:15この動画では、書き方と引数と戻り値、記事の基本例である連番のゼロ埋めと、
0:20元の文字列が長い場合の境界例、埋め文字の繰り返され方、符号付き数値での落とし穴まで、
0:25実行結果と一緒に学びます。
0:29前回のオブジェクト・キーズでキー一覧を取り出す操作を学んだ流れで、今回は文字列の見た目を整える基本操作を押さえましょう。
0:39ゼロ埋めという言葉を聞いたことがある方は、まさにその操作だと考えてください。
0:44まず動作環境を確認します。
0:46パッドスタートはイーエス二千十七で加わった、比較的新しい文字列メソッドです。
0:52クロームでは五十七以降、エッジでは十五以降、ファイアーフォックスでは四十八以降、
0:56サファリでは十以降で使えます。
1:00ノード・ジェイエスでは八・ゼロ・ゼロ以降に対応しています。
1:04記事の互換性情報はエムディーエヌのデータに基づく目安です。
1:08現在の主要環境ではほぼ心配ありませんが、古いブラウザーを対象にする場合は、
1:12先に対応状況を確認してください。
1:16追加の読み込みは不要で、空文字列にも関数として備わっていることを実機で確認済みです。
1:22迷ったときは、実際に使うブラウザーで小さなコードを試してみるのが確実です。
1:27書き方を確認します。
1:29対象の文字列に続けてパッドスタートと書き、カッコの中に目標の長さと、埋める文字列を渡します。
1:37第一引数がそろえたい長さ、第二引数が不足分を埋める文字です。
1:43第二引数を省略すると、空白で埋められます。
1:47戻り値は、先頭を埋めた新しい文字列で、元の文字列自体は変更されません。
1:53スライドの例では、四十二を長さ五にゼロ埋めしてゼロゼロゼロ四二になること、
2:00そして五を長さ三にすると空白が二つ付くことを、実機で確認しました。
2:06長さは文字数で数える点も覚えておいてください。
2:11目標の長さに現在の長さが届いていない場合、その差の分だけ文字が先頭に足されます。
2:18記事の基本例を見ます。
2:20数値の七をまずストリングで文字列に変換し、長さ三になるまでゼロで先頭を埋めるコードです。
2:27実行するとゼロゼロ七と表示され、記事の期待出力と一致し、ノードの実機結果とも一致しました。
2:35記事が勧めるように、保存しておく値は数値のまま持ち、画面に表示する時点で文字列にして幅をそろえる設計が扱いやすくなります。
2:45会員番号や伝票番号、ファイル名の連番など、桁数をそろえると並び順や見た目が安定する場面で、
2:50そのまま使える形です。
2:54三桁にそろえることで、書類や画面の中で番号の見た目がきれいに統一されます。
3:00実践的な使い方として、番号の一覧をまとめて整える例を見ます。
3:06一、七、十二という数値の配列をマップで処理し、それぞれ文字列に変換してから長さ三にゼロ埋めしています。
3:15結果はゼロゼロ一、ゼロゼロ七、ゼロ一二となり、実機とも一致しました。
3:21桁がそろうと、文字列として並べ替えても数字の順序と一致しやすくなり、一覧表示もきれいに整います。
3:30時刻表示で九時五分をゼロ九、ゼロ五のように整える場合も、同じ考え方で各部分にパッドスタートを適用できます。
3:39この形は、在庫番号や社員番号など、業務で実際に使う識別子の表示にも応用できます。
3:46埋め文字の細かい動きを確認します。
3:49エービーシーを長さ六にしたい場合、不足は三文字なので埋め文字の一二三がそのまま入ります。
3:57長さ七なら不足は四文字で、埋め文字は繰り返されたうえで必要な四文字だけが使われ、
4:02一二三一エービーシーになります。
4:07どちらも実機と一致しました。
4:09一方、埋め文字に空文字列を渡すと、何も足すことができず、元の文字列がそのまま返ります。
4:17区切り模様のように複数文字で埋めたい場合は、この繰り返しと切り捨ての仕組みを意識して長さを決めてください。
4:26複数文字で埋める際は、この切り捨ての動きまで含めて結果を予測してみてください。
4:33記事の境界条件の例を見ます。
4:35四桁の文字列一二三四に対して、目標の長さを三と指定するコードです。
4:41すでに目標を超えているため、ゼロは追加されず、一二三四がそのまま返ります。
4:47実行結果は記事の期待出力とも一致しています。
4:51つまりパッドスタートは、短い文字列を伸ばすことはできても、長い文字列を短く切り詰めることはしません。
4:59最大桁数を超えたデータが混ざっても情報は失われませんが、表示幅がそろわない可能性は残るため、
5:05入力側の桁数チェックと組み合わせるとより安全です。
5:11伸ばすだけ、という一方向の性質を覚えておくと、このメソッドへの誤解がぐっと減ります。
5:18よく似たメソッドであるパッドエンドとの使い分けを整理します。
5:23パッドスタートが先頭を埋めるのに対して、パッドエンドは末尾を埋めます。
5:30スライドでは、一二を長さ五にした場合で比べています。
5:34スタートではゼロゼロゼロ一二、エンドでは一二ゼロゼロゼロとなり、実機とも一致しました。
5:42数値の桁をそろえて右寄せに見せたいならスタート、項目名の後ろに空白を足して左寄せの列をそろえたいならエンド、
5:49というように、埋める方向で選んでください。
5:56引数の形と、長ければ切り詰めない性質は、どちらも共通です。
6:01どちらも文字列のメソッドなので、数値を渡したいときは先に文字列化が必要です。
6:08注意点として、符号や小数点を含む数値の扱いを見ます。
6:12マイナス七を文字列にして長さ四にゼロ埋めすると、結果はゼロゼロマイナス七となり、
6:16実機でも確認できました。
6:20マイナス記号もただの文字として扱われ、その前側にゼロが付くため、数値の書式としては不自然な見た目になります。
6:28小数の一・五も同様で、ゼロゼロ一・五と文字列として埋められるだけです。
6:34記事も、負数や小数の書式には単純な文字埋めでは不十分だと注意しています。
6:39符号を保ったまま桁をそろえたい場合は、符号と数値部分を分けて処理してください。
6:46見た目を整える前に、値の意味を壊していないかを確認する習慣が大切です。
6:51もう一つの注意点です。
6:53パッドスタートは文字列のメソッドなので、数値に対して直接呼び出すとタイプ・エラーの例外が発生します。
7:00実機でも、関数ではないという内容のエラーになることを確認しました。
7:05数値を扱うときは、先にストリングで文字列へ変換してから呼び出してください。
7:11また、戻り値は新しい文字列であり、元の変数の中身は七のまま変わりません。
7:16埋めた結果を使いたい場合は、戻り値を変数に受け取る書き方を徹底してください。
7:22この不変の性質は、元のデータを壊さないという安心感にもつながります。
7:27戻り値の受け取り忘れはよくあるミスなので、代入までセットで意識してください。
7:32まとめです。
7:33パッドスタートは、文字列の先頭を埋めて指定の長さにそろえるメソッドです。
7:38判断のポイントは三つです。
7:40まず、第一引数に目標の長さ、第二引数に埋め文字を指定し、省略すると空白で埋められること。
7:47次に、埋め文字は不足分に合わせて繰り返され、余りは切り捨てられること。
7:52そして、元の文字列が目標より長い場合は切り詰められず、元の文字列自体も変更されないことです。
7:58まずは記事の基本例と境界例を実行し、目標の長さや埋め文字を一つ変えて、結果を予測してから確かめてみてください。
8:06次回のスターツウィズと合わせると、文字列操作の幅が広がります。
8:10お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

String.prototype.padStart()で文字列の先頭を埋めて指定の長さにそろえる方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのString.prototype.padStart()の使い方：引数・戻り値・実例と注意点 →