1. 犀牛前端部落首页
  2. JavaScript百科

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

前段时间,我正在用JavaScript构建一个倒计时计时器,我需要格式化我的秒和毫秒。我希望秒的长度总是2数,毫秒的长度总是3位数。换句话说,我希望1秒显示为01,1毫秒显示为001。

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

俺编写了自己的函数来“填充”这些数字,但是俺发现JavaScript、padStart()和padEnd()中有内置函数来完成这一任务。

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

使用案例

我们首先介绍几个不同的填充用例。

案例一

假设标签和值在同一行,比如姓名: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

案例二

在显示价格时通常显示两位数的价格。

例如:

$10.1

实际上你想要的是这样的结果:

$10.01

案例三

对于日期,您希望日期和月份都是两位数。

2020-5-4

你想要的可能是这样的结果:

2020-05-04

案例四

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

1:1

你想要的结果可能是:

01:001

padstart()

让我们从padStart()和标签和值示例开始。比方说,我们希望标签右对齐,以便值从相同的位置开始:

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

由于电话号码是两个标签中较长的一个,所以我们希望在名称标签的开头填充空格。不过为了以后的考虑,我们还是不要将它扩展到电话号码的长度,而是扩展到更长的长度,比如20个字符。这样,如果你以后再用长一点的标签,这个方法仍然有效。

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

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

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

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

现在,让我们填充第一个标签。要调用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

填充下一行:

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

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

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

padEnd()

对于相同的标签和值示例,让我们改变填充标签的方式。让我们将标签向左对齐,这样我们就可以在末尾添加填充。

示例代码:

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

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

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

现在,让我们填充第一个标签。和我们之前做的一样,有两个小的区别。现在,我们使用的是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

其他相关填充

我们还没有指定这一点(尽管可能很明显),但是填充函数是专门与字符串而不是数字关联的。所以,要填充一个数字,我们需要先把它转换成一个字符串。

案例一

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

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));

案例二

设置显示日期

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

案例三

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

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

总结

虽然编写自己的填充函数并不困难,但是为什么要自己编写呢?里面已经内置了非常使用的函数。

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/3251.html

发表评论

登录后才能评论