This article I will introduce padStart
and padEnd
and some information about them.
1 2 3 4 5 6 | <span class="token keyword">const</span> string <span class="token operator">=</span> <span class="token string">'hi'</span> <span class="token punctuation">;</span> string <span class="token punctuation">.</span> <span class="token function">padStart</span> <span class="token punctuation">(</span> <span class="token number">3</span> <span class="token punctuation">,</span> <span class="token string">'c'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// "chi"</span> string <span class="token punctuation">.</span> <span class="token function">padEnd</span> <span class="token punctuation">(</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token string">'l'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// "hill"</span> |
1. Syntax
The syntax of String Pad
is quite simple:
1 2 3 4 | string <span class="token punctuation">.</span> <span class="token function">padStart</span> <span class="token punctuation">(</span> <span class="token operator"><</span> targetLength <span class="token operator">></span> <span class="token punctuation">,</span> <span class="token operator"><</span> padString <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> string <span class="token punctuation">.</span> <span class="token function">padEnd</span> <span class="token punctuation">(</span> <span class="token operator"><</span> targetLength <span class="token operator">></span> <span class="token punctuation">,</span> <span class="token operator"><</span> padString <span class="token operator">></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
2. Understanding the Parameters
The padEnd
and padStart
both take the same parameters
2.1. targetLength
Length of the resulting string when str
currently gets pad
. If the length of str
greater than targetLength
, the result is str
(unchanged).
1 2 3 4 5 6 | <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token string">'str'</span> <span class="token punctuation">.</span> <span class="token function">padStart</span> <span class="token punctuation">(</span> <span class="token number">5</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> result <span class="token punctuation">.</span> length <span class="token punctuation">;</span> <span class="token comment">// 5</span> result <span class="token operator">=</span> <span class="token string">'12345678'</span> <span class="token punctuation">.</span> <span class="token function">padStart</span> <span class="token punctuation">(</span> <span class="token number">5</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> result <span class="token punctuation">.</span> length <span class="token punctuation">;</span> <span class="token comment">// 8</span> |
Note: targetLength
not the number of times str
is pad
2.2. padString
padString
is the string used to pad
current. If the padString
is not set, it will default to " "
(U + 0020 ‘SPACE’).
1 2 3 4 5 6 | <span class="token string">'hi'</span> <span class="token punctuation">.</span> <span class="token function">padStart</span> <span class="token punctuation">(</span> <span class="token number">5</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Same as</span> <span class="token string">'hi'</span> <span class="token punctuation">.</span> <span class="token function">padStart</span> <span class="token punctuation">(</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token string">' '</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token string">'abc'</span> <span class="token punctuation">.</span> <span class="token function">padStart</span> <span class="token punctuation">(</span> <span class="token number">6</span> <span class="token punctuation">,</span> <span class="token string">"123465"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// "123abc"</span> |
If you pass empty string
, it will do nothing: v
1 2 3 4 5 | <span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token string">'hi'</span> <span class="token punctuation">.</span> <span class="token function">padStart</span> <span class="token punctuation">(</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token string">''</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> result <span class="token punctuation">;</span> <span class="token comment">// ''</span> result <span class="token punctuation">.</span> length <span class="token punctuation">;</span> <span class="token comment">// 2</span> |
If padString
long resulting in a return dài
than targetLength
, it will be truncated
from cuối
to đầu
of padString
.
1 2 3 | <span class="token string">'hi'</span> <span class="token punctuation">.</span> <span class="token function">padEnd</span> <span class="token punctuation">(</span> <span class="token number">7</span> <span class="token punctuation">,</span> <span class="token string">'SAMANTHA'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 'hiSAMAN'</span> |
How it handles other data types
As mentioned above, the type of the second parameter
passed is string
. However, you can still pass a value of another type, which will automatically convert to a string
via the toString()
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token comment">// NUMBER</span> <span class="token punctuation">(</span> <span class="token number">100</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">toString</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// '100'</span> <span class="token comment">// BOOLEAN</span> <span class="token boolean">true</span> <span class="token punctuation">.</span> <span class="token function">toString</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 'true'</span> <span class="token boolean">false</span> <span class="token punctuation">.</span> <span class="token function">toString</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 'false'</span> <span class="token comment">// ARRAY</span> <span class="token punctuation">[</span> <span class="token string">'A'</span> <span class="token punctuation">]</span> <span class="token punctuation">.</span> <span class="token function">toString</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 'A'</span> <span class="token punctuation">[</span> <span class="token string">''</span> <span class="token punctuation">]</span> <span class="token punctuation">.</span> <span class="token function">toString</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// ''</span> <span class="token comment">// OBJECT</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">toString</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// '[object Object]'</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> hi <span class="token operator">:</span> <span class="token string">'hi'</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> <span class="token function">toString</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// '[object Object]'</span> |
The above is the result of toString()
for some data types.
1 2 3 4 5 6 7 8 9 10 11 | <span class="token string">'SAM'</span> <span class="token punctuation">.</span> <span class="token function">padStart</span> <span class="token punctuation">(</span> <span class="token number">8</span> <span class="token punctuation">,</span> <span class="token number">100</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// '10010SAM'</span> <span class="token string">'SAM'</span> <span class="token punctuation">.</span> <span class="token function">padStart</span> <span class="token punctuation">(</span> <span class="token number">8</span> <span class="token punctuation">,</span> <span class="token boolean">true</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 'truetSAM'</span> <span class="token string">'SAM'</span> <span class="token punctuation">.</span> <span class="token function">padStart</span> <span class="token punctuation">(</span> <span class="token number">8</span> <span class="token punctuation">,</span> <span class="token boolean">false</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 'falseSAM'</span> <span class="token string">'SAM'</span> <span class="token punctuation">.</span> <span class="token function">padStart</span> <span class="token punctuation">(</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token string">''</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 'SAM'</span> <span class="token string">'SAM'</span> <span class="token punctuation">.</span> <span class="token function">padStart</span> <span class="token punctuation">(</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token string">'hi'</span> <span class="token punctuation">]</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 'hiSAM'</span> <span class="token string">'SAM'</span> <span class="token punctuation">.</span> <span class="token function">padStart</span> <span class="token punctuation">(</span> <span class="token number">18</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// '[object Object]SAM'</span> <span class="token string">'SAM'</span> <span class="token punctuation">.</span> <span class="token function">padStart</span> <span class="token punctuation">(</span> <span class="token number">18</span> <span class="token punctuation">,</span> <span class="token punctuation">{</span> hi <span class="token operator">:</span> <span class="token string">'hi'</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// '[object Object]SAM'</span> |
Handling undefined
Interestingly, when you convert undefined
to a string
with toString
, you’ll get a TypeError
error:
1 2 | <span class="token keyword">undefined</span> <span class="token punctuation">.</span> <span class="token function">toString</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// TypeError: Cannot read property 'toString' of undefined</span> |
However, if you pass undefined
like padString
then you won’t get an error:
1 2 3 | <span class="token string">'SAM'</span> <span class="token punctuation">.</span> <span class="token function">padStart</span> <span class="token punctuation">(</span> <span class="token number">10</span> <span class="token punctuation">,</span> <span class="token keyword">undefined</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// ' SAM'</span> |
Why? As far as spec:
ECMAScript Spec If fillString is undefined, let filler be the String value consisting solely of the code unit 0x0020 (SPACE).
=> When you pass a value other than undefined
(of course, different from the string
) it will automatically convert the passed value to a string
through the toString()
Use Case
Tabular Formatting with padEnd
One of the most commonly used string pad
applications is formatting
1 2 3 4 | <span class="token string">'abc'</span> <span class="token punctuation">.</span> <span class="token function">padEnd</span> <span class="token punctuation">(</span> <span class="token number">6</span> <span class="token punctuation">,</span> <span class="token string">'.'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// abc...</span> |
Right Aligning String with padStart
Align left / right with padStart
and padEnd
without using css
1 2 3 4 5 | console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'JavaScript'</span> <span class="token punctuation">.</span> <span class="token function">padStart</span> <span class="token punctuation">(</span> <span class="token number">15</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'HTML'</span> <span class="token punctuation">.</span> <span class="token function">padStart</span> <span class="token punctuation">(</span> <span class="token number">15</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'CSS'</span> <span class="token punctuation">.</span> <span class="token function">padStart</span> <span class="token punctuation">(</span> <span class="token number">15</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'Vue'</span> <span class="token punctuation">.</span> <span class="token function">padStart</span> <span class="token punctuation">(</span> <span class="token number">15</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
The result will be:
1 2 3 4 5 | JavaScript <span class="token constant">HTML</span> <span class="token constant">CSS</span> Vue |
Receipt formatting
You can also justify both sides of the text (still not use css
)
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">const</span> purchase <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">[</span> <span class="token string">'Masks'</span> <span class="token punctuation">,</span> <span class="token string">'9.99'</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token string">'Shirt'</span> <span class="token punctuation">,</span> <span class="token string">'20.00'</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token string">'Jacket'</span> <span class="token punctuation">,</span> <span class="token string">'200.00'</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">[</span> <span class="token string">'Gloves'</span> <span class="token punctuation">,</span> <span class="token string">'10.00'</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">;</span> purchase <span class="token punctuation">.</span> <span class="token function">forEach</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter"><span class="token punctuation">[</span> item <span class="token punctuation">,</span> price <span class="token punctuation">]</span></span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> item <span class="token operator">+</span> price <span class="token punctuation">.</span> <span class="token function">padStart</span> <span class="token punctuation">(</span> <span class="token number">20</span> <span class="token operator">-</span> item <span class="token punctuation">.</span> length <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Result:
1 2 3 4 5 | Masks <span class="token number">9.99</span> Shirt <span class="token number">20.00</span> Jacket <span class="token number">200.00</span> Gloves <span class="token number">10.00</span> |
Masking Numbers
Another application of it is masking number
, understood simply to hide some elements of a sequence of numbers (usually card number
).
1 2 3 4 5 6 | <span class="token keyword">const</span> bankNumber <span class="token operator">=</span> <span class="token string">'2222 2222 2222 2222'</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> last4Digits <span class="token operator">=</span> bankNumber <span class="token punctuation">.</span> <span class="token function">slice</span> <span class="token punctuation">(</span> <span class="token operator">-</span> <span class="token number">4</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> last4Digits <span class="token punctuation">.</span> <span class="token function">padStart</span> <span class="token punctuation">(</span> bankNumber <span class="token punctuation">.</span> length <span class="token punctuation">,</span> <span class="token string">'*'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// ***************2222</span> |
Browser Support
padStart
and padEnd
were introduced at the same time and it supports the same browsers – all browsers except Internet Explorer
Browser | |
---|---|
Chrome | ✅ |
Firefox | ✅ |
Safari | ✅ |
Edge | ✅ |
Internet Explorer | ❌ |
Reference
https://www.samanthaming.com/tidbits/97-string-padstart-padend/