js padStart() 和 padEnd() 格式字符串

terry 2年前 (2023-09-09) 阅读数 191 #Javascript

前一段时间，我用 JavaScript 构建了一个倒计时器，我需要格式化秒和毫秒。我希望秒的长度始终为 2 位数字，毫秒的长度始终为 3 位数字。也就是说我希望1秒显示为01，1毫秒显示为001。

我编写了自己的函数来“填充”数字，但我发现 JavaScript 中有内置函数 padStart() 和 padEnd() 来执行此任务。

在本文中，让我们看看如何利用 JavaScript 中的这些内置函数。

用例

让我们首先介绍填充的几种不同用途。

案例1

假设标签和值在同一行，例如姓名：James 和电话号码：(555)-555-1234。

如果将这些不同长度的电线堆叠在一起，看起来会有点奇怪。

Name: James
Phone Number: (555)-555-1234

您可能想要的是这样的效果：

Name:           James
Phone Number:   (555)555-1234

或：

        Name: James
Phone Number: (555)555-1234

案例2

当他们显示价格时，通常会显示两位数的价格。

例如：

$10.1

你想要的其实是这个结果：

$10.01

案例3

对于日期，您希望日和月均为两位数。

2020-5-4

你想要的结果可能是：

2020-05-04

案例4

与上面的日期类似，对于 ms 计时器，您希望秒为 2 位数字，ms 为 3 位数字。

1:1

您想要的结果可以是：

01:001

padstart()

让我们从 padStart() 以及标签和值示例开始。假设我们希望标签对齐，以便值从相同的位置开始：

       Name: James
Phone Number: (555)555-1234

由于电话号码是两个标签中较长的一个，因此我们希望在姓名标签的开头填充空格。但出于将来的考虑，我们不要将其扩展到电话号码的长度，而是更长的长度，比如 20 个字符。这样，如果您将来使用更长的标签，该方法仍然有效。

在填写之前，这里是显示此信息的启动代码。

现在，让我们填写第一个标签。调用padStart()，必须传递两个参数： 一个参数用于填写字符串的目标长度，另一个参数用于填写字符。在本例中，我们希望长度为 20，填充字符为空格。实现代码如下：

const label1 = "Name";
const label2 = "Phone Number";
const name = "James"
const phoneNumber = "(555)-555-1234";

console.log(label1.padStart(20, " ") + ": " + name);
console.log(label2 + ": " + phoneNumber);

//               Name: James
////Phone Number: (555)-555-1234

填充下一行：

padEnd()

对于相同的标签和值示例，让我们更改填充标签的方式。让我们将标签向左对齐，以便我们可以在末尾添加填充。

示例代码：

现在，让我们填写第一个标签。和我们之前做的一样，有两个小差别。现在我们使用 padEnd() 而不是 padStart()，我们需要在填充之前将冒号与标签连接起来。这样，我们就可以确保结肠处于正确的位置。

const label1 = "Name";
const label2 = "Phone Number";
const name = "James"
const phoneNumber = "(555)-555-1234";

console.log((label1 + ': ').padEnd(20, ' ') + name);
console.log(label2 + ": " + phoneNumber);

//Name:               James
//Phone Number: (555)-555-1234

填充两行：

const label1 = "Name";
const label2 = "Phone Number";
const name = "James"
const phoneNumber = "(555)-555-1234";

console.log((label1 + ': ').padEnd(20, ' ') + name);
console.log((label2 + ': ').padEnd(20, ' ') + phoneNumber);

//Name:               James
//Phone Number:       (555)-555-1234

其他相关填充

我们还没有指定这一点（尽管它可能很明显），但 fill 函数与字符串特别相关，而不是数字。因此，要填充数字，我们首先需要将其转换为字符串。

案例1

让我们看一下用于显示价格的代码。

const dollars = 10;
const cents = 1;
console.log("$" + dollars + "." + cents); //$10.1

要填写价格，我们必须先将其转换为字符串，然后调用padStart()函数，指定长度为1，填充字符为'0'；

const dollars = 10;
const cents = 1;
console.log("$" + dollars + "." + cents.toString().padStart(2,0));

案例2

输入显示日期

const month = 2;
const year = 2020;

console.log(year + "-" + month); //2020-2

输入月份的两位数字：

const month = 2;
const year = 2020;

console.log(year + "-" + month.toString().padStart(2,"0")); // 2020-02

案例3

最后是定时器了。我们想要格式化两个不同的数字，秒和毫秒。同样的原则也适用。

const seconds = 1;
const ms = 1;

console.log(seconds + ":" + ms); //1:1

现在必须用 0 填充，以便于阅读：

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