JS中如何使用padStart()和padEnd()格式化字符串？

朱雀 2020-07-01 20:58 554阅读 0赞

# JS中如何使用padStart()和padEnd()格式化字符串？

几天前，我正在使用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
```

**金额**

在中国，显示价格时通常显示两位数的角、分。所以代替这个...

```
￥10.1
```

你会想要这个。

```
￥10.01
```

**日期**

对于日期，日期和月份都需要2位数字。所以代替这个...

```
2020-5-4
```

你会想要这个。

```
2020-05-04
```

**时间**

与上面的日期类似，对于计时器，你需要2位数字表示秒，3位数字表示毫秒。所以代替这个...

```
1:1
```

你会想要这个。

```
01:001
```

**padstart()**

让我们从 `padStart()` 以及标签和值示例开始。假设我们希望标签彼此正确对齐，以使值在同一位置开始。

```
        Name: zhangsan
Phone Number: (555)555-1234
```

由于 `Phone Number` 是两个标签中较长的一个，因此我们要在 `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()`，你需要传递两个参数：一个用于填充字符串的目标长度，另一个用于你希望填充的字符。在这种情况下，我们希望长度为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
```

现在填充第二行。

```
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
```

现在，让我们填充第一个标签，与我们之前所做的类似，但有两个小区别。现在，我们使用 `padEnd()` 而不是`padStart()`，并且需要在填充之前将冒号与标签连接起来，这样我们就能确保冒号在正确的位置。

```
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
```

**数字(价格、日期、计时器等)呢?**

padding函数是专门针对字符串而不是数字的，所以，我们需要先将数字转换为字符串。

**价格**

让我们看一下显示价格的初始代码。

```
const rmb = 10;
const cents = 1;
console.log("￥" + rmb + "." + cents); //￥10.1
```

要填充分，我们需要先将其转换为字符串，然后调用 `padStart()` 函数，指定长度为1且填充字符为'0'；

```
const rmb = 10;
const cents = 1;
console.log("￥" + rmb + "." + cents.toString().padStart(2,0)); //￥10.01
```

**日期**

这是显示日期的初始代码。

```
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
```

现在要填充，我将在单独的行上进行填充，以便于阅读。

```
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
```

**最后**

虽然编写自己的padding函数并不难，但既然已经内置在JavaScript中，为什么还要自己去做呢？有很多有趣的函数已经内置了。在你自己构建一些东西之前，可能值得先快速搜索一下。

发表评论取消回复

表情：

评论列表（有 0 条评论，554人围观）

还没有评论，来说两句吧...

相关阅读

相关字符串格式化问题：Java如何使用printf风格字符串

在Java中，虽然没有完全的`printf`风格字符串，但我们可以使用`String.format()`方法来达到类似的效果。以下是一个例子： ```java // 定义

左手的ㄟ右手/ 2024年09月27日 17:36/ 0 赞/ 40 阅读

相关手写 padStart 和 padEnd 函数

1、padStart函数实现 function padStart(str, length, char) { let len = Math.floor(

爱被打了一巴掌/ 2024年03月01日 08:26/ 0 赞/ 43 阅读

相关 padStart()。padEnd()

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。`padStart()`用于头部补全，`padEnd()`用于尾部补全。 `padS

柔情只为你懂/ 2022年12月25日 09:57/ 0 赞/ 74 阅读

相关 JS中快速格式化JSON字符串

原始JSON const obj = { a:1,b:{ c:2},d:3}; 格式化代码 // 第二参数可以是一个函数用于过滤每一个key，若传null

「爱情、让人受尽委屈。」/ 2022年11月09日 14:16/ 0 赞/ 259 阅读

相关 JS字符串补全方法padStart()和padEnd()简介

一、关于字符串补全 ![字符串补全文章缩略图][346edcd18021b91127550c71b34ba182.png] 在JS中，字符串补全是常用操作，用的比较多的

我不是女神ヾ/ 2022年10月23日 01:53/ 0 赞/ 114 阅读

相关 JS padStart()方法和padEnd()方法(ES6新增方法)

> 在日常开发中，有时候会遇到字符串填充的问题,常见的如：时间不足两位数补“0”等。 > > padStart() 用于补全头部 > padEnd() 用于补全尾

短命女/ 2022年10月05日 06:49/ 0 赞/ 133 阅读

相关 padStart()方法,padEnd()方法实现字符串补全

转载：[https://blog.csdn.net/ixygj197875/article/details/79090578][https_blog.csdn.net_ixyg

女爷i/ 2022年03月18日 08:36/ 0 赞/ 168 阅读

相关 ES6中新增的padStart()和padEnd()方法的使用(字符串填充)

padStart() padStart(maxLength: number, fillString?: string): string; maxLengt

你的名字/ 2022年02月04日 00:13/ 0 赞/ 177 阅读

相关 js中格式化时间字符串

下面介绍一种在js中，关于时间格式的转换。 <script> function formatDate(date, format) { if (!da...

红太狼/ 2021年03月27日 12:17/ 0 赞/ 641 阅读

相关 JS中如何使用padStart()和padEnd()格式化字符串？

JS中如何使用padStart()和padEnd()格式化字符串？几天前，我正在使用JavaScript构建倒数计时器，因此我需要格式化秒和毫秒，我希望秒始终是2位数的...

朱雀/ 2020年07月01日 20:58/ 0 赞/ 555 阅读