Angular2 或 TypeScript 用零填充字符串答案

【问题标题】：Angular2 or TypeScript Left padding a String with ZerosAngular2 或 TypeScript 用零填充字符串
【发布时间】：2017-04-04 15:42:47
【问题描述】：

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

我知道我可以编写自己的逻辑。但我正在寻找一个可以填充它的隐式 util 函数。

我将 angular2 与 TypeScript 一起使用。寻找类似this 的东西。

跟java差不多

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

【问题讨论】：

见How can I create a Zerofilled value using JavaScript?
我不认为 angularjs 或 angular2 提供这样的方法
TypeScript 和 JavaScript 没有内置的格式或 sprintf 函数。如果需要，您可以使用third-party one。
How can I pad a value with leading zeros?的可能重复

标签： string angular typescript padding

【解决方案1】：

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

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

打字稿

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

编辑：有几种更好、更高效的方法可以做到这一点。请参阅此答案中的讨论：https://stackoverflow.com/a/9744576/1734678（如果您有时间，我建议阅读大部分提交的答案）

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

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

查看https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

编辑：正如其他人所提到的，从 Angular 4 开始，您可以按如下方式使用

{{ myNumber | number:'2.0' }}

【讨论】：

如果你有一个负数会发生什么？你不是以“00-2”结束
@SlimCheney 我认为是的，但只是好奇为什么您需要在负数中使用前导零
人们有这么奇怪的用例，不是吗！！我需要生成文件名字符串，以便文件名以时间偏移结尾，例如 ["z-090", "z-060", "z-030", "z+000", "z+030", "z +060"]

【解决方案2】：

使用最新的 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) ;
}

【讨论】：

为什么不简单呢？ (String(padChar).repeat(size - text.length) + text)
@JoelHarkes 早在 2017 年，我不相信当时的版本支持重复字符串功能。 ES5？

【解决方案3】：

由于 Angular v4 有 DecimalPipe，我们可以轻松添加前导零：https://angular.io/api/common/DecimalPipe

在您的 html 中，您可以使用如下内容：

{{ myNumber | number:'2.0' }}

【讨论】：

这引入了千位分隔符，而不仅仅是填充
@Alejandro 您还可以在代码中使用管道。只需导入它并调用它，或者只是调用相应的转换方法（我认为是 Angular 6+）。例如。 formatNumber()，见angular.io/api/common/formatNumber

【解决方案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);
}

【讨论】：

【解决方案5】：

您可以在 HTML 中使用以下模板之一

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

或者

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

或者在组件ts代码文件中

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

【讨论】：

这正是我要找的，谢谢分享。我现在的代码：{{r.HH |编号：'2.'}}：{{r.MM | number: '2.'}} 给予：例如。 03:00 而不是 3:0

【解决方案6】：

你可以为此创建一个管道

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

【讨论】：

【解决方案7】：

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

str.padStart(9 ,"0")

【讨论】：