Angular2 or TypeScript: Left padding a String with Zeros

Question

I have a number, let's say 9. But I need it as the string "09".

I know I can write my own logic. But I am looking for an implicit utility function which can pad the number.

I am using Angular2 with TypeScript. Looking for something like this.

Just similar to Java:

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

See [How can I create a Zerofilled value using JavaScript?](http://stackoverflow.com/questions/1267283/how-can-i-create-a-zerofilled-value-using-javascript) — Wiktor Stribiżew, Nov 21 '16 at 09:36
TypeScript and JavaScript have no built-in format or sprintf functions. You can use a [third-party one](http://stackoverflow.com/q/36495685/6923555), if you want. — rodrigocfd, Nov 21 '16 at 10:28
Possible duplicate of [How can I pad a value with leading zeros?](https://stackoverflow.com/questions/1267283/how-can-i-pad-a-value-with-leading-zeros) — V Maharajh, Sep 25 '17 at 17:21

score 80 · Accepted Answer · edited Feb 25 '23 at 09:50

80

You can create your own function for this. To format the number you will have to convert it to a string first:

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

Edit: There are a couple of better and more performant ways to do this. See the discussion in this answer (I recommend reading most of the submitted answers if you got time): https://stackoverflow.com/a/9744576/1734678

Update: ECMAScript 2017 now has support for string padding:

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

Check out padStart's documentation.

EDIT: As mentioned by others, since Angular 4 you can use this:

{{ myNumber | number:'2.0' }}

edited Feb 25 '23 at 09:50

Matthias Braun

32,039
22
142
171

answered Nov 21 '16 at 10:21

Evans M.

1,791
16
20

What happens if you have a negative number? Do you not end up with "00-2" – tomcheney May 27 '20 at 12:56
@SlimCheney I would think yes but just curious as to why you would need leading zeros in a negative number – Evans M. Jun 02 '20 at 06:46
People have such weird use cases don't they!! I needed to generate file name string so that files names end with a time offset eg ["z-090", "z-060", "z-030", "z+000", "z+030", "z+060"] – tomcheney Jun 04 '20 at 08:12

score 47 · Answer 2 · answered Jun 13 '18 at 12:02

47

Since Angular v4 there is DecimalPipe which let's easily add leading zeros: https://angular.io/api/common/DecimalPipe

In your html, you can use then something like:

{{ myNumber | number:'2.0' }}

answered Jun 13 '18 at 12:02

maczos

601
7
6

1

this introduces thousand separators not only padding – TRiNE Feb 04 '19 at 07:13
1

@Alejandro You can also use pipes in code. Just import it and call it or just call the corresponding transform method (I think Angular 6+). E.g. formatNumber(), see https://angular.io/api/common/formatNumber – seBaka28 Oct 09 '19 at 13:30

score 35 · Answer 3 · answered Apr 09 '19 at 08:52

35

You can use one of below templates in HTML

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

Or

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

Or in component ts code file

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

answered Apr 09 '19 at 08:52

ElasticCode

7,311
2
34
45

This is exactly what I was looking for, thanks for sharing. My code now: {{r.HH | number: '2.'}}:{{r.MM | number: '2.'}} giving: eg. 03:00 in stead of 3:0 – Mark Aug 18 '21 at 11:51

score 11 · Answer 4 · answered Aug 07 '20 at 08:05

11

if i want to pad "0" at the start and want the length of the String str to be 9:

str.padStart(9 ,"0")

answered Aug 07 '20 at 08:05

Barani r

2,119
1
25
24

score 8 · Answer 5 · answered Oct 27 '17 at 02:36

8

With the latest Typescript, you can do:

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

answered Oct 27 '17 at 02:36

Steven Scott

10,234
9
69
117

3

why not simply? `(String(padChar).repeat(size - text.length) + text)` – Joel Harkes Jun 06 '19 at 11:42
@JoelHarkes Back in 2017, I do not believe the versions supported the repeat string function at that time. ES5? – Steven Scott Jun 06 '19 at 16:46

score 4 · Answer 6 · answered Nov 30 '18 at 17:33

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

score 1 · Answer 7 · answered May 15 '19 at 06:39

You can create a Pipe for that

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

score 0 · Answer 8 · answered May 29 '23 at 06:42

0

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

answered May 29 '23 at 06:42

Mohammadreza Askari

430
5
7

Angular2 or TypeScript: Left padding a String with Zeros

8 Answers8

Linked