String is one of the most important parts in javascript, apart from the commonly used methods such as trim
, concat
, subString
, toUpperCase
, toLowerCase
; Javascript also provides us with many other useful methods to make manipulating and solving problems easier when working with String. Although these functions have been around for a long time or you have also used them, this is an opportunity for us to review and better understand the use of each function, let’s get started !!!
1. includes
includes
method is used to test whether a string contains another string or not.
The following example checks whether the word ‘world’ is in the string or not:
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 will create a new string that repeats the specified number of times of the original string.
The following example creates a new string with 5 iterations of the original string:
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 will search for a string match with the passed regular expression, and return an array of strings that were just searched; if not found, null
is returned.
The following example:
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 will return a character in the string at the specified index position
The following example:
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 will return the first index position of a string in the original string, otherwise it returns -1
The following example:
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 will return a new string with the replaced values of the original string.
The following example:
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
adds a number of characters in front of the original string with a specified length.
padEnd
adds a number of characters after the original string with a specified length.
The following example:
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
There are many ways to convert strings to array of characters, but I prefer to use the spread operator.
The following example:
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> |
Conclude
Above are the string methods that we need to know to apply well in all situations, I hope to help beginners understand and use string effectively in javascript. Thank you for reading the article.