62

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

8 Answers 8

93

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' }} 
Sign up to request clarification or add additional context in comments.

3 Comments

What happens if you have a negative number? Do you not end up with "00-2"
@SlimCheney I would think yes but just curious as to why you would need leading zeros in a negative number
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"]
49

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

2 Comments

this introduces thousand separators not only padding
@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 angular.io/api/common/formatNumber
36

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

1 Comment

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
21

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

str.padStart(9 ,"0") 

Comments

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

2 Comments

why not simply? (String(padChar).repeat(size - text.length) + text)
@JoelHarkes Back in 2017, I do not believe the versions supported the repeat string function at that time. ES5?
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); } 

Comments

2

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

Comments

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.