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 サイトの他の関連記事を参照してください。