Angular2或TypeScript：如何使用零左填充字符串

Question

Angular2或TypeScript：如何使用零左填充字符串

stringangulartypescriptpadding

56

我有一个数字，比如说9。但我需要把它变成字符串“09”。

我知道我可以自己编写逻辑。但我正在寻找一个隐式的实用函数来填充这个数字。

我正在使用TypeScript的Angular2。类似于这样的东西。

就像Java中一样：

String.format("%010d", Integer.parseInt(mystring));

- Partha Sarathi Ghosh

请参阅如何使用JavaScript创建零填充值？。 - Wiktor Stribiżew

我认为AngularJS或Angular2没有提供这样的方法。 - Aniruddha Das

TypeScript和JavaScript没有内置的格式化或sprintf函数。如果需要，可以使用第三方库。 - rodrigocfd

可能是重复的问题，参考如何在值前面填充零？。 - V Maharajh

8个回答

47

自从Angular v4版本开始，就有DecimalPipe可以轻松添加前导零：https://angular.io/api/common/DecimalPipe 在你的html中，你可以像这样使用： {{ myNumber | number:'2.0' }}

- maczos

1

这个功能不仅引入了千位分隔符，而且还可以进行填充。 - TRiNE

1

@Alejandro，在代码中你也可以使用管道。只需导入它并调用它或者直接调用相应的转换方法（我认为 Angular 6+ 可以）。例如 formatNumber()，请参见 https://angular.io/api/common/formatNumber。 - seBaka28

35

您可以在HTML中使用以下任意一个模板：

{{ ("00" + 9).slice(-2) }} // 09

或者

{{ 9 | number: '2.' }} // 09

或者在组件的 TypeScript 代码文件中。

var x = ("00" + 9).slice(-2);

- ElasticCode

这正是我一直在寻找的，感谢分享。我的代码现在：{{r.HH | number: '2.'}}:{{r.MM | number: '2.'}} 输出结果为：例如 03:00 而不是 3:0。 - Mark

14

如果我想在字符串 str 的开头填充 "0"，并且希望该字符串的长度为 9：

str.padStart(9 ,"0")

- Barani r

8

使用最新的 TypeScript，您可以进行以下操作：

let myStr:string = padLeft('123', '0', 6);  // '000123'

padLeft(text:string, padChar:string, size:number): string {
    return (String(padChar).repeat(size) + text).substr( (size * -1), size) ;
}

- Steven Scott

3

为什么不直接使用 (String(padChar).repeat(size - text.length) + text) 呢？ - Joel Harkes

@JoelHarkes 在2017年，我不相信那个时候的版本支持重复字符串函数。ES5？ - Steven Scott

4

public padIntegerLeftWithZeros(rawInteger: number, numberOfDigits: number): string {
    let paddedInteger: string = rawInteger + '';
    while (paddedInteger.length < numberOfDigits) {
        paddedInteger = '0' + paddedInteger;
    }
    return paddedInteger;
}

public zeroPadIntegerLeft3Digits(rawInteger: number): string {
    return this.padIntegerLeftWithZeros(rawInteger, 3);
}

- CalvinDale

1

你可以为此创建一个管道。

{{ID |LeftPadFilter: ID}}



import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'LeftPadFilter',
    pure: false
})
export class LeftPadFilter implements PipeTransform {
    transform(item: string): string {
        return (String('0').repeat(2) + item).substr((2 * -1), 2);
    }
}

- Kevin

0

export function Dx(num: any, dn: number = 2) {
  return ("0".repeat(dn) + Math.floor(num)).slice(-dn);
}

- Mohammadreza Askari

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Evans M. · Accepted Answer

您可以为此创建自己的函数。要格式化数字，您首先必须将其转换为字符串：

function pad(num, size) {
    let s = num+"";
    while (s.length < size) s = "0" + s;
    return s;
}

TypeScript：

pad(num:number, size:number): string {
    let s = num+"";
    while (s.length < size) s = "0" + s;
    return s;
}

编辑: 有几种更好、更高效的方法可以实现这一点。请查看此答案中的讨论（如果您有时间，我建议阅读大多数提交的答案）：https://dev59.com/oHM_5IYBdhLWcg3wslbs#9744576

更新: ECMAScript 2017 现在支持字符串填充：

str.padStart(targetLength [, padString])
str.padEnd(targetLength [, padString])

查看padStart的文档。

编辑：如其他人所述，自Angular 4以来，您可以使用此功能：

{{ myNumber | number:'2.0' }}