Angular2 或 TypeScript 用零填充字符串

Posted 2023-03-06

【中文标题】Angular2 或 TypeScript 用零填充字符串

【英文标题】：Angular2 or TypeScript Left padding a String with Zeros

【发布时间】：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?的可能重复

【参考方案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://***.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")