String là một trong những phần quan trọng nhất trong javascript, ngoài những methods hay dùng như trim
, concat
, subString
, toUpperCase
, toLowerCase
; Javascript còn cung cấp cho chúng ta rất nhiều methods hữu ích khác để thao tác và giải quyết các vấn đề dễ dàng hơn khi làm việc với String. Mặc dù những hàm này ra đời cũng khá lâu hoặc các bạn cũng đã từng sử dụng nhưng đây là một cơ hội để chúng ta ôn lại và hiểu rõ hơn công dụng của mỗi hàm, bắt đầu nào!!!
1. includes
includes
method dùng để kiểm tra một string có chứa một string khác hay không.
Ví dụ sau đây kiểm tra từ ‘world’ có trong chuỗi hay không:
1 2 3 4 5 6 | <span class="token keyword">const</span> str <span class="token operator">=</span> <span class="token string">"Hello world, hello javascript."</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">includes</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">/* true */</span> <span class="token comment">// kiểm tra từ vị trí thứ 15</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span><span class="token string">"world"</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> <span class="token comment">/* false */</span> |
2. repeat
repeat
method sẽ tạo ra một string mới lặp lại một số lần xác định của string ban đầu.
Ví dụ sau đây tạo một string mới với 5 lần lặp lại string ban đầu:
1 2 3 4 5 | <span class="token keyword">const</span> str <span class="token operator">=</span> <span class="token string">"Hello viblo"</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">repeat</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 punctuation">;</span> <span class="token comment">/* Hello vibloHello vibloHello vibloHello vibloHello viblo */</span> |
3. match
match
method sẽ thực hiện tìm kiếm một string match với regular expression truyền vào, và trả về một array các string vừa tìm kiếm được; nếu không tìm thấy thì trả về null
.
Ví dụ sau:
1 2 3 4 5 6 7 8 | <span class="token keyword">const</span> str <span class="token operator">=</span> <span class="token string">"The rain in SPAIN stays mainly in the plain"</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/ain/g</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/* ["ain", "ain", "ain"] */</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/ain/gi</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/* ["ain", "AIN", "ain", "ain"] */</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/ainnn/g</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/* null */</span> <span class="token keyword">const</span> str2 <span class="token operator">=</span> <span class="token string">"Will 2021 be better than 2020?"</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str2<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex">/[0-9]/g</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/* ["2", "0", "2", "1", "2", "0", "2", "0"] */</span> |
4. charAt
charAt
method sẽ trả về một ký tự trong string tại vị trí index xác định
Ví dụ sau:
1 2 3 | <span class="token keyword">const</span> str <span class="token operator">=</span> <span class="token string">"HELLO WORLD"</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">charAt</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/* W */</span> |
5. indexOf
indexOf
method sẽ trả về vị trí index đầu tiên của một chuỗi ký tự trong string ban đầu, nếu không tìm thấy thì trả về -1
Ví dụ sau:
1 2 3 4 | <span class="token keyword">const</span> str <span class="token operator">=</span> <span class="token string">"Hello Javascript!"</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">"Javascript"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/* 6 */</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">"Javascripttt"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">/* -1 */</span> |
6. replace
replace
method sẽ trả về một string mới với các giá trị đã được thay thế của string ban đầu.
Ví dụ sau:
1 2 3 4 5 6 7 | <span class="token keyword">const</span> str <span class="token operator">=</span> <span class="token string">"Hello world. Hello javascript"</span><span class="token punctuation">;</span> <span class="token comment">// Chỉ thay thế từ đầu tiên</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token string">"Hello"</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">/* Hi world. Hello javascript */</span> <span class="token comment">// Thay thế tất cả bằng cách sử dụng regex</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/Hello/g</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">/* Hi world. Hi javascript */</span> |
7. padStart, padEnd
padStart
add thêm một số ký tự phía trước string ban đầu với một độ dài xác định.
padEnd
add thêm một số ký tự phía sau string ban đầu với một độ dài xác định.
Ví dụ sau:
1 2 3 4 5 6 7 8 | <span class="token comment">// Add thêm ký tự "0" vào phía trước eightBits cho đến khi có độ dài = 8</span> <span class="token keyword">const</span> eightBits <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">"0"</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>eightBits<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 00000001</span> <span class="token comment">// Add thêm ký tự "*" vào phía sau anonymizedCode cho đến khi có độ dài = 5</span> <span class="token keyword">const</span> anonymizedCode <span class="token operator">=</span> <span class="token string">"34"</span><span class="token punctuation">.</span><span class="token function">padEnd</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> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>anonymizedCode<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 34***</span> |
8. Convert string to array
Có nhiều cách để convert string sang array các ký tự, nhưng mình thích sử dụng toán tử spread operator hơn.
Ví dụ sau:
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> |
9. Convert number to string
1 2 3 4 | <span class="token keyword">const</span> val <span class="token operator">=</span> <span class="token number">1</span> <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>val<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: "1"</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: "string"</span> |
10. Convert string to number
1 2 3 4 | <span class="token keyword">const</span> val <span class="token operator">=</span> <span class="token operator">+</span> <span class="token string">"1"</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: 1</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Result: "number"</span> |
Kết luận
Trên đây là những string methods mà chúng ta cần biết để vận dụng tốt trong tất cả các tình huống, mình hy vọng sẽ giúp cho những bạn mới làm quen sẽ hiểu rõ hơn và sử dụng hiệu quả string trong javascript. Cám ơn mọi người đã đọc bài viết.