ホームページ > 記事 > ウェブフロントエンド > PadStart() と PadEnd() を使用して JS で文字列をフォーマットするにはどうすればよいですか? (チップ)
数日前、JavaScript を使用してカウントダウン タイマーを構築していたため、秒とミリ秒をフォーマットする必要がありました。秒の長さを常に 2 桁にし、ミリ秒を常に 3 桁にしたいと考えていました。桁の長さ。つまり、1
秒を 01
として表示し、1
ミリ秒を 001
として表示します。
私は最終的に数値を「埋め込む」関数を独自に作成することになりましたが、JavaScript には組み込み関数 padStart() と padEnd() があることに気付きました。これらの機能を実行します。この記事では、JavaScript でこれらの組み込み関数を活用する方法を見ていきます。
ユースケース
まず、いくつかの異なるパディングのユースケースを紹介します。
ラベルと値
ラベルと値が同じ行にあるとします。たとえば、name: zhangsan
と Phone Number: ( 555)-555-1234
。それらを組み合わせると、少し奇妙に見えるでしょう。次のようになります。
Name: zhangsan Phone Number: (555)-555-1234
あなたはこれを欲しがるかもしれません。
Name: zhangsan Phone Number: (555)555-1234
またはこれ...
Name: zhangsan Phone Number: (555)555-1234
金額
中国では、価格を表示する場合、通常 2 桁の 10 セントと 2 桁のディムとセントが表示されます。したがって、これの代わりに...
¥10.1
これが必要になります。
¥10.01
Date
日付の場合、日と月の両方に 2 桁の数字が必要です。したがって、これの代わりに...
2020-5-4
これが必要になります。
2020-05-04
Time
上記の日付と同様、タイマーには秒の場合は 2 桁、ミリ秒の場合は 3 桁が必要です。したがって、これの代わりに...
1:1
これが必要になります。
01:001
padstart()
padStart()
とラベルと値の例から始めましょう。値が同じ位置から始まるように、ラベルを互いに適切に位置合わせしたいとします。
Name: zhangsan Phone Number: (555)555-1234
Phone Number
は 2 つのタグのうち長い方であるため、Name
タグの先頭にスペースを追加する必要があります。将来のニーズに備えて、電話番号の長さに合わせてパディングするのではなく、もう少し長め (たとえば 20 文字) にパディングしましょう。そうすれば、将来的に長いラベルを使用する場合でも、このトリックは引き続き機能します。
これは、この情報が入力される前に表示するためのスターター コードです。
const label1 = "Name"; const label2 = "Phone Number"; const name = "zhangsan" const phoneNumber = "(555)-555-1234"; console.log(label1 + ": " + name); console.log(label2 + ": " + phoneNumber); //Name: zhangsan //Phone Number: (555)-555-1234
次に、最初のタグを入力しましょう。 padStart()
を呼び出すには、2 つのパラメータを渡す必要があります。1 つは埋め込み文字列のターゲット長で、もう 1 つは埋め込みたい文字です。この場合、長さを 20 にし、埋め込み文字をスペースにします。
const label1 = "Name"; const label2 = "Phone Number"; const name = "zhangsan" const phoneNumber = "(555)-555-1234"; console.log(label1.padStart(20, " ") + ": " + name); console.log(label2 + ": " + phoneNumber); // Name: zhangsan ////Phone Number: (555)-555-1234
次に 2 行目を入力します。
const label1 = "Name"; const label2 = "Phone Number"; const name = "zhangsan" const phoneNumber = "(555)-555-1234"; console.log(label1.padStart(20, " ") + ": " + name); console.log(label2.padStart(20, " ") + ": " + phoneNumber); // Name: zhangsan //// Phone Number: (555)-555-1234
padEnd()
同じラベルと値の例で、ラベルの入力方法を変更してみましょう。最後にパディングを追加できるように、ラベルを左に揃えてみましょう。
初期コード
const label1 = "Name"; const label2 = "Phone Number"; const name = "zhangsan" const phoneNumber = "(555)-555-1234"; console.log(label1 + ": " + name); console.log(label2 + ": " + phoneNumber); //Name: zhangsan //Phone Number: (555)-555-1234
次に、前に行ったことと同様に、最初のタグを設定してみましょう。ただし、2 つの小さな違いがあります。ここでは、padStart()
の代わりに padEnd()
を使用し、パディングする前にコロンをラベルに接続する必要があるため、コロンが正しい場所にあることを確認します。
const label1 = "Name"; const label2 = "Phone Number"; const name = "zhangsan" const phoneNumber = "(555)-555-1234"; console.log((label1 + ': ').padEnd(20, ' ') + name); console.log(label2 + ": " + phoneNumber); //Name: zhangsan //Phone Number: (555)-555-1234
両方の行にデータが入力されました。
const label1 = "Name"; const label2 = "Phone Number"; const name = "zhangsan" const phoneNumber = "(555)-555-1234"; console.log((label1 + ': ').padEnd(20, ' ') + name); console.log((label2 + ': ').padEnd(20, ' ') + phoneNumber); //Name: zhangsan //Phone Number: (555)-555-1234
数値 (価格、日付、タイマーなど) はどうなりますか?
パディング関数は数値ではなく文字列に特化しています。したがって、最初に数値を文字列に変換する必要があります。
#価格
価格を表示する最初のコードを見てみましょう。const rmb = 10; const cents = 1; console.log("¥" + rmb + "." + cents); //¥10.1ポイントを埋めるには、まず文字列に変換してから、長さを 1、パディング文字を '0' として指定して
padStart() 関数を呼び出す必要があります。 ;
const rmb = 10; const cents = 1; console.log("¥" + rmb + "." + cents.toString().padStart(2,0)); //¥10.01
Date
これは、日付を表示するための最初のコードです。const month = 2; const year = 2020; console.log(year + "-" + month); //2020-2次に、月が 2 桁の数字であることを確認するために入力しましょう。
const month = 2; const year = 2020; console.log(year + "-" + month.toString().padStart(2,"0")); // 2020-02
タイマー
最後にタイマーです。秒とミリ秒の 2 つの異なる数値をフォーマットします。同じ原則が当てはまりますが。これが初期コードです。const seconds = 1; const ms = 1; console.log(seconds + ":" + ms); //1:1パディングについては、読みやすいように別の行で行います。
const seconds = 1; const formattedSeconds = seconds.toString().padStart(2,0); const ms = 1; const formattedMs = ms.toString().padStart(3,0); console.log(formattedSeconds + ":" + formattedMs); // 01:001
最後に
独自のパディング関数を書くのは難しくありませんが、既に作成されているのに、なぜ自分で行う必要があるのでしょうか。 JavaScript に組み込まれていますか? 毛織物?すでにたくさんの興味深い機能が組み込まれています。自分で何かを構築する前に、簡単に検索してみる価値があるかもしれません。 #この記事は、https://segmentfault.com/a/1190000022812375から転載されています。関連チュートリアルの推奨事項:JavaScript ビデオ チュートリアル
以上がPadStart() と PadEnd() を使用して JS で文字列をフォーマットするにはどうすればよいですか? (チップ)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。