String Pad trong JavaScript

Thứ Ba, 01/09/2020

Tram Ho

Bài viết này mình sẽ giới thiệu về padStart và padEnd và 1 số thông tin về chúng.

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

const string = 'hi';

string.padStart(3, 'c'); // "chi"

string.padEnd(4, 'l'); // "hill"

1. Syntax

Cú pháp của String Pad khá là đơn giản:

string<span class="token punctuation">.</span><span class="token function">padStart</span><span class="token punctuation">(</span><span class="token operator">&lt;</span>targetLength<span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token operator">&lt;</span>padString<span class="token operator">&gt;</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">&lt;</span>targetLength<span class="token operator">&gt;</span><span class="token punctuation">,</span> <span class="token operator">&lt;</span>padString<span class="token operator">&gt;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

string.padStart(<targetLength>, <padString>);

string.padEnd(<targetLength>, <padString>);

2. Understanding the Parameters

2 phương thức padEnd và padStart đều nhận vào các parameters tương tự nhau

2.1. targetLength

Độ dài của chuỗi kết quả khi str hiện tại được pad. Nếu độ dài của str lớn hơn targetLength thì kết quả trả về vẫn là str (không bị thay đổi)

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

let result = 'str'.padStart(5);

result.length; // 5

result = '12345678'.padStart(5);

result.length; // 8

Note: targetLength không phải số lần str được pad

2.2. padString

padString là chuỗi dùng để pad hiện tại. Nếu không set padString thì nó sẽ nhận giá trị default là " " (U+0020 ‘SPACE’).

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

'hi'.padStart(5);

// Same as

'abc'.padStart(6,"123465"); // "123abc"

Nếu bạn truyền vào empty string, thì nó sẽ không làm gì cả :v

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

const result = 'hi'.padStart(5, '');

result; // ''

result.length; // 2

Nếu padString dài dẫn tới kết quả trả về dài hơn targetLength thì nó sẽ được truncated từ cuối lên đầu của padString.

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

'hi'.padEnd(7, 'SAMANTHA');

// 'hiSAMAN'

How it handles other data types

Như đã nói ở trên, kiểu của parameter thứ 2 truyền vào là string. Tuy nhiên bạn vẫn có thể truyền giá trị kiểu khác vào, nó sẽ tự động convert thành string thông qua phương thức toString()

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

// NUMBER

(100).toString(); // '100'

// BOOLEAN

true.toString(); // 'true'

false.toString(); // 'false'

// ARRAY

['A'].toString(); // 'A'

[''].toString(); // ''

// OBJECT

({}).toString(); // '[object Object]'

({hi: 'hi'}).toString(); // '[object Object]'

Ở trên là kết quả của toString() cho 1 số kiểu dữ liệu.

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

'SAM'.padStart(8, 100); // '10010SAM'

'SAM'.padStart(8, true); // 'truetSAM'

'SAM'.padStart(8, false); // 'falseSAM'

'SAM'.padStart(5, ['']); // 'SAM'

'SAM'.padStart(5, ['hi']); // 'hiSAM'

'SAM'.padStart(18, {}); // '[object Object]SAM'

'SAM'.padStart(18, {hi: 'hi'}); // '[object Object]SAM'

Handling `undefined`

Có 1 điểm khá thú vị, khi bạn convert undefined sang string bằng toString thì bạn sẽ gặp lỗi TypeError:

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

undefined.toString(); // TypeError: Cannot read property 'toString' of undefined

Tuy nhiên, nếu bạn truyền undefined như padString thì bạn sẽ không gặp lỗi:

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

// ' SAM'

Tại sao nhỉ? Theo như spec:

ECMAScript Spec If fillString is undefined, let filler be the String value consisting solely of the code unit 0x0020 (SPACE).

=> Khi bạn truyền giá trị khác undefined (dĩ nhiên là khác cả string) nó sẽ tự động convert giá trị truyền vào thành string thông qua phương thức toString()

Use Case

Tabular Formatting with padEnd

Một trong những ứng dụng của string pad thường được dùng đó là là formatting

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

'abc'.padEnd(6, '.');

// abc...

Right Aligning String with padStart

Căn trái / phải với padStart và padEnd mà không dùng css

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>

console.log('JavaScript'.padStart(15));

console.log('HTML'.padStart(15));

console.log('CSS'.padStart(15));

console.log('Vue'.padStart(15));

Kết quả sẽ là:

     JavaScript
           <span class="token constant">HTML</span>
            <span class="token constant">CSS</span>
            Vue

JavaScript

HTML

CSS

Vue

Receipt formatting

Bạn cũng có thể căn đều 2 bên text (vẫn không dùng css)

<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">=&gt;</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>

const purchase = [

['Masks', '9.99'],

['Shirt', '20.00'],

['Jacket', '200.00'],

['Gloves', '10.00'],

];

purchase.forEach(([item, price]) => {

console.log(item + price.padStart(20 - item.length));

});

Kết quả:

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>

Masks 9.99

Shirt 20.00

Jacket 200.00

Gloves 10.00

Masking Numbers

Một ứng dụng nữa của nó là masking number, hiểu đơn giản là ẩn 1 số thành phần của 1 dãy số (thường là card number)

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

const bankNumber = '2222 2222 2222 2222';

const last4Digits = bankNumber.slice(-4);

last4Digits.padStart(bankNumber.length, '*');

// ***************2222

Browser Support

padStart và padEnd được giới thiệu đồng thời và nó hỗ trợ các browser giống nhau – tất cả browser ngoại trừ Internet Explorer

Browser
Chrome	✅
Firefox	✅
Safari	✅
Edge	✅
Internet Explorer	❌

Reference

https://www.samanthaming.com/tidbits/97-string-padstart-padend/

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo

String Pad trong JavaScript

1. Syntax

2. Understanding the Parameters

2.1. targetLength

2.2. padString

How it handles other data types

Handling `undefined`

Use Case

Tabular Formatting with padEnd

Right Aligning String with padStart

Receipt formatting

Masking Numbers

Browser Support

Reference

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript

1. Syntax

2. Understanding the Parameters

2.1. targetLength

2.2. padString

How it handles other data types

Handling undefined

Use Case

Tabular Formatting with padEnd

Right Aligning String with padStart

Receipt formatting

Masking Numbers

Browser Support

Reference

TikTok trở thành nền tảng mảng xã hội lớn thứ hai ở Nam Phi

Mất giá nhanh nhất sau 9 tháng ra mắt, iPhone 14 Pro Max tiếp tục phá đáy tại Việt Nam

Hướng dẫn sử dụng ngôn ngữ R cho người mới bắt đầu

10 plugin cần thiết của SublimeText dành cho các lập trình viên JavaScript

Handling `undefined`