Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go)
1. Sao chép một chuỗi nhiều lần
Thay vì phải gõ 1 chuỗi lặp đi lặp lại thì bạn có thể sử dụng method .repeat().
Phương thức repeat() xây dựng và trả về một chuỗi mới chứa số lượng nhất định bản sao chép của chuỗi được gọi tới và nối chung với nhau.
1 2 3 | <span class="token keyword">const</span> laughing <span class="token operator">=</span> <span class="token string">"ha"</span><span class="token punctuation">.</span><span class="token function">repeat</span><span class="token punctuation">(</span><span class="token number">3</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>laughing<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "hahaha"</span> |
2. Chèn thêm ký tự vào chuỗi với một độ dài cụ thể cho trước
Trường hợp này bạn sẽ thường hay gặp nếu muốn mã hoá số điện thoại hoặc mã thẻ bằng việc sử dụng 2 method padStart() và padEnd(). Cụ thể bạn quan sát ví dụ sau để hình dung ra chức năng của nó
1 2 3 4 5 6 7 8 | <span class="token comment">// thêm dấu * tính từ đầu chuỗi cho đến khi đủ 8 ký tự</span> <span class="token keyword">const</span> eightBitsStart <span class="token operator">=</span> <span class="token string">"001"</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 string">"*"</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>eightBitsStart<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "*****001"</span> <span class="token comment">// thêm dấu * tính từ cuối chuỗi cho đến khi đủ 8 ký tự</span> <span class="token keyword">const</span> eightBitsEnd <span class="token operator">=</span> <span class="token string">"001"</span><span class="token punctuation">.</span><span class="token function">padEnd</span><span class="token punctuation">(</span><span class="token number">8</span><span class="token punctuation">,</span> <span class="token string">"*"</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>eightBitsEnd<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "001*****"</span> |
3. Biến string thành array
Sử dụng spread operator giúp bạn có thể dễ dàng biến string thành array trong 1 nốt nhạc
1 2 3 4 | <span class="token keyword">const</span> word <span class="token operator">=</span> <span class="token string">"apple"</span><span class="token punctuation">;</span> <span class="token keyword">const</span> characters <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>word<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>characters<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ["a", "p", "p", "l", "e"]</span> |
4. Đếm số ký tự trong chuỗi
Rất đơn giản, sử dụng length là xong
1 2 3 | <span class="token keyword">const</span> word <span class="token operator">=</span> <span class="token string">" apple "</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>word<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 7</span> |
À mà từ từ quay xe đã, sao nó lại ra như này nhỉ =))
1 2 3 | <span class="token keyword">const</span> word <span class="token operator">=</span> <span class="token string">"?"</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>word<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 2</span> |
Có thể giải thích như sau: JS đại diện cho hầu hết các ký tự dưới dạng điểm mã 16 bit. Tuy nhiên, một số ký tự nhất định được biểu diễn dưới dạng hai (hoặc nhiều) điểm mã 16 bit, được gọi là các cặp thay thế . Nếu bạn đang sử dụng length, JS sẽ cho bạn biết có bao nhiêu điểm mã được sử dụng. Do đó, nó ? bao gồm hai điểm mã và trả về một giá trị không chính xác.
Để giải quyết vấn đề này, bạn sẽ cần nhét nó vào array và lấy length của array
1 2 3 4 | <span class="token keyword">const</span> word <span class="token operator">=</span> <span class="token string">"?"</span><span class="token punctuation">;</span> <span class="token keyword">const</span> characters <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>word<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>characters<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 1</span> |
5. Đảo ngược một chuỗi
Cũng lại cần đến anh array này 1 chút =))
1 2 3 4 | <span class="token keyword">const</span> word <span class="token operator">=</span> <span class="token string">"apple"</span><span class="token punctuation">;</span> <span class="token keyword">const</span> reversedWord <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>word<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">""</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>reversedWord<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "elppa"</span> |
6. Viết hoa chữ cái đầu
Để làm được điều này thì CSS chỉ cần 1 dòng, còn JS thì cần mấy dòng đây
1 2 3 4 | <span class="token keyword">let</span> word <span class="token operator">=</span> <span class="token string">"apple"</span><span class="token punctuation">;</span> word <span class="token operator">=</span> word<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> word<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token number">1</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>word<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "Apple"</span> |
Cách dài hơn nhưng an toàn hơn (bạn có thể xem lại #4 để hiểu issue)
1 2 3 4 5 6 7 | <span class="token keyword">let</span> word <span class="token operator">=</span> <span class="token string">"apple"</span><span class="token punctuation">;</span> <span class="token keyword">const</span> characters <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>word<span class="token punctuation">]</span><span class="token punctuation">;</span> characters<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span> <span class="token operator">=</span> characters<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> word <span class="token operator">=</span> characters<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">""</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>word<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "Apple"</span> |
7. Viết hoa chữ cái đầu tiên của mỗi từ
1 2 3 4 | <span class="token keyword">const</span> <span class="token function-variable function">capitalizeEveryWord</span> <span class="token operator">=</span> <span class="token parameter">str</span> <span class="token operator">=></span> str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/b[a-z]/g</span><span class="token punctuation">,</span> <span class="token parameter">char</span> <span class="token operator">=></span> char<span class="token punctuation">.</span><span class="token function">toUpperCase</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">capitalizeEveryWord</span><span class="token punctuation">(</span><span class="token string">'hello world!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "Hello World!"</span> |
8. Chia nhỏ chuỗi dựa theo một nhóm ký tự
Để làm được điều này bạn sẽ cần kết hợp split() và biểu thức regex để xác định sẽ chia chuỗi theo nhóm ký tự nào.
Xem ví dụ sau để hiểu rõ hơn
1 2 3 4 | <span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token string">"apples,bananas;cherries"</span><span class="token punctuation">;</span> <span class="token keyword">const</span> fruits <span class="token operator">=</span> list<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token regex">/[,;]/</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// chia chuỗi dựa trên "," và ";"</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>fruits<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ["apples", "bananas", "cherries"]</span> |
9. Kiểm tra sự tồn tại của “chuỗi trong chuỗi”
Rất đơn giản, bạn có thể sử dụng includes()
1 2 3 | <span class="token keyword">const</span> text <span class="token operator">=</span> <span class="token string">"Hello, world! My name is Kai!"</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>text<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">"Kai"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span> |
10. Kiểm tra chuỗi bắt đầu/kết thúc bằng 1 chuỗi
1 2 3 4 | <span class="token keyword">const</span> text <span class="token operator">=</span> <span class="token string">"Hello, world! My name is Kai!"</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>text<span class="token punctuation">.</span><span class="token function">startsWith</span><span class="token punctuation">(</span><span class="token string">"Hello"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>text<span class="token punctuation">.</span><span class="token function">endsWith</span><span class="token punctuation">(</span><span class="token string">"world"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// false</span> |
11. Thay thế toàn bộ sự xuất hiện của từ trong chuỗi
Khi nghe đến bài toán này đa phần chúng ta sẽ nghĩ đến regex dạng
1 2 3 4 5 | <span class="token keyword">const</span> text <span class="token operator">=</span> <span class="token string">"I like apples. You like apples."</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>text<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/apples/g</span><span class="token punctuation">,</span> <span class="token string">"bananas"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "I like bananas. You like bananas."</span> |
Tuy nhiên, trong các string method cũng có 1 method làm được điều tương tự
1 2 3 4 5 | <span class="token keyword">const</span> text <span class="token operator">=</span> <span class="token string">"I like apples. You like apples."</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>text<span class="token punctuation">.</span><span class="token function">replaceAll</span><span class="token punctuation">(</span><span class="token string">"apples"</span><span class="token punctuation">,</span> <span class="token string">"bananas"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "I like bananas. You like bananas."</span> |
12. Xoá thẻ HTML ra khỏi chuỗi
1 2 3 4 | <span class="token keyword">const</span> <span class="token function-variable function">stripHTMLTags</span> <span class="token operator">=</span> <span class="token parameter">str</span> <span class="token operator">=></span> str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/<[^>]*>/g</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">stripHTMLTags</span><span class="token punctuation">(</span><span class="token string">'<p><em>lorem</em> <strong>ipsum</strong></p>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'lorem ipsum'</span> |
13. Sắp xếp các ký tự trong chuỗi theo thứ tự bảng chữ cái
1 2 3 4 | <span class="token keyword">const</span> <span class="token function-variable function">sortCharactersInString</span> <span class="token operator">=</span> <span class="token parameter">str</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token operator">...</span>str<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=></span> a<span class="token punctuation">.</span><span class="token function">localeCompare</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</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">sortCharactersInString</span><span class="token punctuation">(</span><span class="token string">'cabbage'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 'aabbceg'</span> |
Kết luận
Trên đây là 1 vài đoạn snippet nho nhỏ nhưng có võ mình tin rằng sẽ giúp ích cho bạn rất nhiều trong quá trình làm việc với js.
Nếu thấy bài viết hay, hãy cho mình +1 upvote nhé. Nếu thích mình hãy nhấn nút follow để biết thêm nhiều thứ hay ho hơn. Chúc bạn thành công !