1. Tổng quan.
Các phương thức xử lý chuỗi (String Methods) trong JavaScript là các hàm được tích hợp vào đối tượng chuỗi (String), cho phép bạn thực hiện các thao tác khác nhau trên chuỗi.
Dưới đây là danh sách một số phương thức quan trọng trong JavaScript:
length: Trả về độ dài của chuỗi.slice(start, end): Trích xuất một phần của chuỗi từ vị trístartđếnend(không bao gồmend).substring(start, end): Tương tự nhưslice()nhưng không hỗ trợ số âm chostarthoặcend.substr(start, length): Trích xuất một phần của chuỗi bắt đầu từ vị trístartvà có độ dàilength.replace(oldStr, newStr): Thay thế tất cả các xuất hiện củaoldStrtrong chuỗi bằngnewStr.replaceAll(oldStr, newStr): Thay thế tất cả các xuất hiện củaoldStrtrong chuỗi bằngnewStr(ES2021 trở đi).toUpperCase(): Chuyển đổi chuỗi thành chữ hoa.toLowerCase(): Chuyển đổi chuỗi thành chữ thường.concat(str1, str2, ...): Kết hợp nhiều chuỗi thành một chuỗi mới.trim(): Loại bỏ các khoảng trắng ở đầu và cuối chuỗi.trimStart()(hoặctrimLeft()): Loại bỏ các khoảng trắng ở đầu chuỗi.trimEnd()(hoặctrimRight()): Loại bỏ các khoảng trắng ở cuối chuỗi.padStart(targetLength, padString): Thêm ký tựpadStringvào đầu chuỗi để có độ dàitargetLength.padEnd(targetLength, padString): Thêm ký tựpadStringvào cuối chuỗi để có độ dàitargetLength.charAt(index): Trả về ký tự ở vị tríindextrong chuỗi.charCodeAt(index): Trả về mã Unicode của ký tự ở vị tríindextrong chuỗi.split(separator): Chia chuỗi thành mảng các phần tử bằng cách sử dụngseparatornhư dấu phân tách.
Các phương thức này giúp bạn thực hiện nhiều thao tác khác nhau trên chuỗi trong JavaScript để xử lý và biến đổi dữ liệu chuỗi theo nhu cầu của bạn.
Lưu ý rằng các phương thức tìm kiếm chuỗi (String search methods) sẽ được đề cập trong chương tiếp theo. Đó là những phương thức cho phép bạn tìm kiếm và xác định sự xuất hiện của chuỗi trong một chuỗi khác. Các phương thức tìm kiếm này bao gồm indexOf(), lastIndexOf(), startsWith(), endsWith() và nhiều phương thức khác để làm việc với tìm kiếm và so sánh chuỗi.
2.2. Chi tiết về các thuộc tính.
2.1. JavaScript String Length.
Thuộc tính length trong JavaScript được sử dụng để trả về độ dài của một chuỗi.
Đây là ví dụ về cách sử dụng nó:
<html>
<body>
<p id="demo"></p>
<script>
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = text.length;
</script>
</body>
</html>Trong ví dụ này, text.length trả về giá trị là 26, vì chuỗi text có 26 ký tự trong đó. Thuộc tính length là một trong những cách thông thường để lấy thông tin về độ dài của một chuỗi trong JavaScript.
2.2. JavaScript String slice().
Phương thức slice() trong JavaScript được sử dụng để trích xuất một phần của chuỗi và trả về phần được trích xuất dưới dạng một chuỗi mới. Phương thức này nhận hai tham số: vị trí bắt đầu và vị trí kết thúc (không bao gồm vị trí kết thúc).
Dưới đây là một ví dụ về cách sử dụng slice():
<html>
<body>
<p id="demo"></p>
<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(7,13);
document.getElementById("demo").innerHTML = part;
</script>
</body>
</html>Trong ví dụ này, text.slice(7, 13) trích xuất một phần của chuỗi text từ vị trí 7 đến vị trí 13 (nhưng không bao gồm vị trí 13) và trả về kết quả là chuỗi “Banana”.
Lưu ý rằng trong JavaScript, các vị trí được đánh số bắt đầu từ 0. Điều này có nghĩa là vị trí đầu tiên có chỉ số 0, vị trí thứ hai có chỉ số 1 và cứ tiếp tục như vậy. Điều này áp dụng cho việc xác định vị trí bắt đầu và vị trí kết thúc khi làm việc với các phương thức xử lý chuỗi như slice(), substring(), và substr() trong JavaScript.
Ví dụ:
- Vị trí đầu tiên trong chuỗi có chỉ số 0.
- Vị trí thứ hai trong chuỗi có chỉ số 1.
- Vị trí thứ ba trong chuỗi có chỉ số 2.
- Và cứ tiếp tục như vậy.
Điều này là quy tắc quan trọng khi làm việc với chuỗi trong JavaScript, và bạn cần phải sử dụng chỉ số đúng để trích xuất hoặc xử lý phần của chuỗi một cách chính xác.
Các ví dụ sau mô tả cách sử dụng phương thức slice() với các tình huống khác nhau.
Nếu bạn bỏ qua tham số thứ hai, phương thức sẽ trích xuất phần còn lại của chuỗi. Kết quả là Banana, Kiwi.
<html>
<body>
<p id="demo"></p>
<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(7)
document.getElementById("demo").innerHTML = part;
</script>
</body>
</html>Nếu một tham số là số âm, vị trí sẽ được đếm từ cuối chuỗi. Kết quả là Banana, Kiwi.
<html>
<body>
<p id="demo"></p>
<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(-12);
document.getElementById("demo").innerHTML = part;
</script>
</body>
</html>Ví dụ này trích xuất một phần của chuỗi từ vị trí -12 đến vị trí -6. Cách sử dụng số âm cho vị trí cho phép bạn đếm từ cuối chuỗi, giúp bạn trích xuất các phần của chuỗi một cách linh hoạt. Và kết quả sẽ là Banana.
<html>
<body>
<div class="dotted-border">
<p id="demo"></p>
<script>
let text = "Apple, Banana, Kiwi";
let part = text.slice(-12,-6)
document.getElementById("demo").innerHTML = part;
</script>
</body>
</html>2.3. JavaScript String substring().
Phương thức substring() trong JavaScript tương tự như slice(), tuy nhiên nó có một khác biệt quan trọng.
Trong substring(), nếu các giá trị start và end nhỏ hơn 0, chúng sẽ được xem như là 0. Dưới đây là một ví dụ về cách sử dụng substring():
<html>
<body>
<p id="demo"></p>
<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substring(7,13);
</script>
</body>
</html>Trong ví dụ này kết quả là “Banana”, bắt đầu từ vị trí 7 đến 13 (nhưng vì giá trị nhỏ hơn 0 nên nó được xem như là 0).
2.4. JavaScript String substr().
Phương thức substr() trong JavaScript cũng tương tự như slice(), nhưng có một sự khác biệt quan trọng:
Tham số thứ hai trong substr() chỉ định độ dài của phần được trích xuất, không phải vị trí kết thúc.
Dưới đây là một ví dụ về cách sử dụng substr():
<html>
<body>
<p id="demo"></p>
<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substr(7,6);
</script>
</body>
</html>Trong ví dụ này, str.substr(7, 6) trả về chuỗi “Banana”, bắt đầu từ vị trí 7 và có độ dài là 6 ký tự. Sự khác biệt quan trọng giữa substr() và slice() là ở tham số thứ hai, trong khi substr() sử dụng độ dài của phần trích xuất, slice() sử dụng vị trí kết thúc.
Nếu bạn bỏ qua tham số thứ hai trong phương thức substr(), nó sẽ trích xuất phần còn lại của chuỗi từ vị trí đã chỉ định đến cuối chuỗi.
<html>
<body>
<p id="demo"></p>
<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substr(7);
</script>
</body>
</html>Trong ví dụ này, str.substr(7) trích xuất phần của chuỗi bắt đầu từ vị trí 7 đến cuối chuỗi và kết quả là chuỗi “Banana, Kiwi”.
Nếu tham số đầu tiên trong phương thức substr() là số âm, thì vị trí bắt đầu sẽ được đếm từ cuối chuỗi.
<html>
<body>
<div class="dotted-border">
<p id="demo"></p>
<script>
let str = "Apple, Banana, Kiwi";
document.getElementById("demo").innerHTML = str.substr(-4);
</script>
</div>
</body>
</html>Trong ví dụ này, str.substr(-4) trích xuất một phần của chuỗi bắt đầu từ vị trí cuối cùng của chuỗi và có độ dài là 4 ký tự, kết quả là chuỗi “Kiwi”.
2.5. Replacing String Content.
Phương thức replace() trong JavaScript không thay đổi chuỗi gốc mà nó được gọi, thay vào đó nó trả về một chuỗi mới chứa sự thay đổi.
Mặc định, phương thức replace() chỉ thay thế lần xuất hiện đầu tiên của chuỗi cần thay thế. Điều này có nghĩa là nếu có nhiều lần xuất hiện của chuỗi cần thay thế trong chuỗi gốc, chỉ có lần xuất hiện đầu tiên sẽ được thay thế.
<html>
<body>
<button onclick="myFunction()">Try it</button>
<p id="demo-replace">Please visit Microsoft and Microsoft!</p>
<script>
function myFunction() {
let text = document.getElementById("demo-replace").innerHTML;
document.getElementById("demo-replace").innerHTML =
text.replace("Microsoft","W3Schools");
}
</script>
</body>
</html>Phương thức replace() mặc định là phân biệt chữ hoa và chữ thường (case-sensitive).
Điều này có nghĩa là nếu bạn cố gắng thay thế một chuỗi với chữ hoa hoặc chữ thường và chuỗi cần thay thế trong chuỗi gốc không khớp chính xác về chữ hoa và chữ thường, thì thay thế sẽ không hoạt động.
<html>
<body>
<div class="dotted-border">
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft!</p>
<script>
function myFunction() {
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML =
text.replace("MICROSOFT","W3Schools");
}
</script>
</div>
</body>
</html>Trong ví dụ này, việc thay thế “MICROSOFT” không hoạt động vì “MICROSOFT” và “Microsoft” không khớp chính xác về chữ hoa và chữ thường.
Nếu bạn muốn thực hiện thay thế không phân biệt chữ hoa và chữ thường, bạn có thể sử dụng biểu thức chính quy với cờ /i để tắt tính năng phân biệt chữ hoa và chữ thường.
<html>
<body>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft and Microsoft!</p>
<script>
function myFunction() {
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML =
text.replace(/Microsoft/g,"W3Schools");
}
</script>
</body>
</html>Ở ví dụ này, /i được sử dụng để tắt tính năng phân biệt chữ hoa và chữ thường, và “MICROSOFT” được thay thế bằng “W3Schools” mà không quan tâm đến việc chữ hoa và chữ thường.
Lưu ý rằng biểu thức chính quy (regular expressions) được viết mà không có dấu ngoặc kép. Điều này có nghĩa là bạn không cần sử dụng dấu ngoặc kép để bao quanh biểu thức chính quy khi sử dụng chúng trong các phương thức xử lý chuỗi hoặc một số ngữ cảnh khác trong JavaScript.Để thay thế tất cả các lần xuất hiện của một chuỗi trong một chuỗi gốc, bạn cần sử dụng biểu thức chính quy (regular expression) với cờ /g (global match). Cờ /g cho biết rằng bạn muốn thay thế tất cả các lần xuất hiện của chuỗi cần thay thế, không chỉ lần đầu tiên.
<html>
<body>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft and Microsoft!</p>
<script>
function myFunction() {
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML =
text.replace(/Microsoft/g,"W3Schools");
}
</script>
</body>
</html>Trong ví dụ này, biểu thức chính quy /Microsoft/g được sử dụng để thay thế tất cả các lần xuất hiện của “Microsoft” trong chuỗi gốc bằng “W3Schools”.
2.6. JavaScript String ReplaceAll().
Trong năm 2021, JavaScript đã giới thiệu phương thức chuỗi replaceAll(), cho phép bạn thay thế tất cả các lần xuất hiện của một chuỗi trong một chuỗi gốc bằng một chuỗi khác. Phương thức này hoạt động không phân biệt chữ hoa và chữ thường mặc định, nghĩa là nó thay thế cả chữ hoa và chữ thường của chuỗi cần thay thế.
Trong ví dụ này, replaceAll() được sử dụng để thay thế tất cả các lần xuất hiện của “Cats” và “cats” bằng “Dogs” và “dogs” và kết quả cuối cùng là chuỗi “I love Dogs and dogs!”.
<html>
<body>
<div class="dotted-border">
<p id="demo"></p>
<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");
document.getElementById("demo").innerHTML = text;
</script>
</div>
</body>
</html>Phương thức replaceAll() trong JavaScript cho phép bạn thay thế chuỗi bằng một biểu thức chính quy (regular expression) thay vì một chuỗi cần thay thế.
Ví dụ:
<html>
<body>
<p id="demo"></p>
<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular";
text = text.replaceAll(/Cats/g,"Dogs");
text = text.replaceAll(/cats/g,"dogs");
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>replaceAll(/Cats/g,"Dogs")sẽ thay thế tất cả các kết hợp “Cats” (bao gồm cả chữ hoa và chữ thường) bằng “Dogs” trong chuỗitext.replaceAll(/cats/g,"dogs")sẽ thay thế tất cả các kết hợp “cats” (chữ thường) bằng “dogs” trong chuỗitext.
I love dogs. Dogs are very easy to love. Dogs are very popularLưu ý rằng bạn phải sử dụng biểu thức chính quy với cờ toàn cục (g) để thay thế tất cả các kết hợp khớp, nếu không bạn có thể nhận được kết quả không như mong muốn.
Lưu ý rằng replaceAll() là một tính năng của ES2021, nghĩa là nó chỉ được hỗ trợ trong phiên bản JavaScript mới nhất. Nó không hoạt động trong Internet Explorer, một trình duyệt web cũ hơn mà không hỗ trợ nhiều tính năng hiện đại của JavaScript.
Vì vậy, khi sử dụng replaceAll(), bạn cần kiểm tra xem trình duyệt của bạn có hỗ trợ nó hay không. Nếu bạn cần hỗ trợ cho các trình duyệt cũ hơn, bạn nên sử dụng các phương thức thay thế khác như replace() hoặc replace() kết hợp với biểu thức chính quy để thực hiện thay thế toàn bộ.2.7. Converting to Upper and Lower Case.
Trong JavaScript, bạn có thể chuyển đổi chuỗi thành chữ in hoa và chữ thường bằng cách sử dụng phương thức sau:
Để chuyển đổi chuỗi thành chữ in hoa, bạn có thể sử dụng phương thức toUpperCase().
<html>
<body>
<button onclick="myFunction()">Try it</button>
<p id="demo">Hello World!</p>
<script>
function myFunction() {
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML =
text.toUpperCase();
}
</script>
</body>
</html>Phương thức toUpperCase() sẽ chuyển đổi toàn bộ chuỗi thành chữ in hoa.
Để chuyển đổi chuỗi thành chữ thường, bạn có thể sử dụng phương thức toLowerCase().
<html>
<body>
<button onclick="myFunction()">Try it</button>
<p id="demo">Hello World!</p>
<script>
function myFunction() {
let text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML =
text.toLowerCase();
}
</script>
</body>
</html>Phương thức toLowerCase() sẽ chuyển đổi toàn bộ chuỗi thành chữ thường.
Phương thức concat() trong JavaScript được sử dụng để kết hợp hai hoặc nhiều chuỗi lại với nhau.
<!DOCTYPE html>
<html>
<body>
<div class="dotted-border">
<p id="demo-concat"></p>
<script>
let text1 = "Hello";
let text2 = "World!";
let text3 = text1.concat(" ",text2);
document.getElementById("demo-concat").innerHTML = text3;
</script>
</div>
</body>
</html>Trong ví dụ này, text1 và text2 được kết hợp bằng cách sử dụng phương thức concat() và được gán vào biến text3. Kết quả cuối cùng là chuỗi “Hello World”, với một khoảng trắng được thêm vào giữa “Hello” và “World”.
Hello World!Phương thức concat() có thể được sử dụng thay cho toán tử cộng (+) để nối chuỗi.
Hai dòng sau đây có cùng kết quả:
text = "Hello" + " " + "World!";
text = "Hello".concat(" ", "World!");Cả hai dòng trên đều sẽ tạo ra chuỗi “Hello World!” bằng cách nối chuỗi “Hello”, một khoảng trắng, và chuỗi “World!”. Sự lựa chọn giữa việc sử dụng toán tử cộng và phương thức concat() thường phụ thuộc vào sở thích cá nhân và tình huống cụ thể.
Lưu ý rằng tất cả các phương thức xử lý chuỗi trong JavaScript đều trả về một chuỗi mới. Chúng không thay đổi chuỗi gốc. Điều này có nghĩa rằng chuỗi trong JavaScript là không thể thay đổi (immutable), có nghĩa là bạn không thể sửa đổi trực tiếp chuỗi, chỉ có thể thay thế chuỗi bằng một chuỗi mới.
Một ví dụ rõ ràng về tính không thay đổi của chuỗi là khi bạn sử dụng phương thức toUpperCase() hoặc toLowerCase() để chuyển đổi chữ hoa hoặc chữ thường trong một chuỗi, phương thức đó sẽ trả về một chuỗi mới thay vì thay đổi chuỗi gốc.
Lưu ý này quan trọng khi bạn làm việc với chuỗi trong JavaScript và cần lưu ý không thay đổi chuỗi gốc khi thực hiện các phương thức xử lý chuỗi.2.8. JavaScript String trim().
Phương thức trim() trong JavaScript được sử dụng để loại bỏ khoảng trắng (hoặc các ký tự trắng khác) từ cả hai phía của một chuỗi.
<!DOCTYPE html>
<html>
<body>
<div class="dotted-border">
<p id="demo"></p>
<script>
let text1 = " Hello World! ";
let text2 = text1.trim();
document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>
</div>
</body>
</html>text1là chuỗi ” Hello World! ” với khoảng trắng ở cả hai đầu.text2là biếntext1sau khi áp dụng phương thứctrim(), nơi khoảng trắng ở cả hai đầu đã bị loại bỏ.
Khi bạn tính độ dài của mỗi chuỗi bằng cách sử dụng text.length, bạn sẽ có kết quả như sau:
- Độ dài của
text1là 22, bao gồm cả các khoảng trắng ở đầu và cuối. - Độ dài của
text2là 12, sau khi đã loại bỏ các khoảng trắng không cần thiết ở đầu và cuối.
Kết quả cuối cùng của nó là.
Length text1 = 22
Length text2 = 12Phương thức trim() rất hữu ích khi bạn muốn loại bỏ các khoảng trắng không cần thiết từ chuỗi, ví dụ như khi bạn xử lý dữ liệu đầu vào từ người dùng.
2.9. JavaScript String trimStart().
Phương thức trimStart() trong JavaScript đã được thêm vào trong phiên bản ECMAScript 2019. Phương thức này tương tự như trim(), nhưng loại bỏ khoảng trắng chỉ từ đầu chuỗi.
<!DOCTYPE html>
<html>
<body>
<div class="dotted-border">
<p id="demo"></p>
<script>
let text1 = " Hello World! ";
let text2 = text1.trimStart();
document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>
</div>
</body>
</html>Trong đoạn code JavaScript, bạn đã sử dụng phương thức trimStart() để loại bỏ khoảng trắng chỉ từ đầu của chuỗi text1. Sau đó, bạn đã tính độ dài của cả hai chuỗi và gán chúng vào phần tử có id="demo" trong HTML để hiển thị.
Kết quả cuối cùng sẽ là:
- Độ dài của
text1là 22, bao gồm cả các khoảng trắng ở đầu và cuối. - Độ dài của
text2là 18, sau khi đã loại bỏ khoảng trắng không cần thiết ở đầu.
Vì vậy, kết quả HTML sẽ là “Length text1 = 22<br>Length text2 = 18”.
Length text1 = 22
Length text2 = 17Phương thức trimStart() hữu ích khi bạn muốn loại bỏ khoảng trắng không cần thiết chỉ từ đầu của chuỗi.
2.10. JavaScript String trimEnd().
Phương thức trimEnd() trong JavaScript đã được thêm vào trong phiên bản ECMAScript 2019. Phương thức này tương tự như trim(), nhưng loại bỏ khoảng trắng chỉ từ cuối chuỗi.
<!DOCTYPE html>
<html>
<body>
<div class="dotted-border">
<p id="demo"></p>
<script>
let text1 = " Hello World! ";
let text2 = text1.trimEnd();
document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>
</div>
</body>
</html>Đoạn JavaScriptđã sử dụng phương thức trimEnd() để loại bỏ khoảng trắng chỉ từ cuối của chuỗi text1. Sau đó, bạn đã tính độ dài của cả hai chuỗi và gán chúng vào phần tử có id="demo" trong HTML để hiển thị.
Kết quả cuối cùng sẽ là:
- Độ dài của
text1là 22, bao gồm cả các khoảng trắng ở đầu và cuối. - Độ dài của
text2là 18, sau khi đã loại bỏ khoảng trắng không cần thiết ở cuối.
Vì vậy, kết quả HTML sẽ là “Length text1 = 22<br>Length text2 = 18”.
Length text1 = 22
Length text2 = 172.11. JavaScript String Padding.
– JavaScript String padStart().
Phương thức padStart() trong JavaScript đã được thêm vào trong phiên bản ECMAScript 2017. Phương thức này được sử dụng để thêm ký tự (hoặc chuỗi) vào đầu của một chuỗi để làm cho độ dài của chuỗi đạt đến một giới hạn đã cho.
<html>
<body>
<p id="demo"></p>
<script>
let text = "5";
text = text.padStart(4,"0");
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>Trong ví dụ này, chuỗi ban đầu là “5”, và chúng ta sử dụng padStart(4, "0") để thêm ký tự “0” vào đầu chuỗi để đạt đến độ dài là 4. Kết quả cuối cùng là chuỗi “0005”.
0005Bạn cũng có thể sử dụng ký tự hoặc chuỗi khác thay vì “0” để thêm vào đầu chuỗi, như trong ví dụ sau:
<html>
<body>
<p id="demo"></p>
<script>
let text = "5";
document.getElementById("demo").innerHTML = text.padStart(4,"x");
</script>
</body>
</html>Trong trường hợp này, chúng ta sử dụng padStart(4, "x") để thêm ký tự “x” vào đầu chuỗi. Kết quả cuối cùng là chuỗi “xx5”.
xxx5Lưu ý rằng phương thức padStart() là một phương thức của chuỗi (string method). Để sử dụng nó để thêm vào một số, bạn cần chuyển đổi số đó thành một chuỗi trước.
<html>
<body>
<p id="demo"></p>
<script>
let numb = 5;
let text = numb.toString();
document.getElementById("demo").innerHTML = text.padStart(4,0);
</script>
</body>
</html>Trong ví dụ này, chúng ta có biến numb là một số, và để sử dụng padStart(), chúng ta đã chuyển đổi nó thành một chuỗi bằng cách sử dụng numb.toString(). Sau đó, chúng ta sử dụng padStart(4, "0") để thêm vào đầu chuỗi để đạt đến độ dài là 4. Kết quả cuối cùng là chuỗi “0005”.
0005Phương thức padStart() là một tính năng của ECMAScript 2017 và được hỗ trợ trong tất cả các trình duyệt như Chrome, Edge, Firefox, Safari và Opera.
Tuy nhiên, nó không được hỗ trợ trong Internet Explorer, vì vậy nếu bạn cần hỗ trợ cho trình duyệt này, bạn cần tìm cách thay thế hoặc sử dụng các kỹ thuật khác để thực hiện chức năng tương tự.
– JavaScript String padEnd().
Phương thức padEnd() trong JavaScript cũng được thêm vào trong phiên bản ECMAScript 2017 và được sử dụng để thêm ký tự (hoặc chuỗi) vào cuối của một chuỗi để đạt đến một độ dài cụ thể.
<html>
<body>
<p id="demo"></p>
<script>
let text = "5";
text = text.padEnd(4,"0");
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>Trong ví dụ này, chuỗi ban đầu là “5”, và chúng ta sử dụng padEnd(4, "0") để thêm ký tự “0” vào cuối chuỗi để đạt đến độ dài là 4. Kết quả cuối cùng là chuỗi “5000”.
5000Bạn cũng có thể sử dụng ký tự hoặc chuỗi khác thay vì “0” để thêm vào cuối chuỗi, như trong ví dụ sau:
<html>
<body>
<p id="demo"></p>
<script>
let text = "5";
document.getElementById("demo").innerHTML = text.padEnd(4,"x");
</script>
</body>
</html>Trong trường hợp này, chúng ta sử dụng padEnd(4, "x") để thêm ký tự “x” vào cuối chuỗi. Kết quả cuối cùng là chuỗi “5xxx”.
5xxxLưu ý rằng phương thức padEnd() cũng là một phương thức của chuỗi (string method). Để sử dụng nó để thêm vào một số, bạn cần chuyển đổi số đó thành một chuỗi trước.
<html>
<body>
<p id="demo"></p>
<script>
let numb = 5;
let text = numb.toString();
document.getElementById("demo").innerHTML = text.padEnd(4,"x");
</script>
</body>
</html>Trong ví dụ này, chúng ta có biến numb là một số, và để sử dụng padEnd(), chúng ta đã chuyển đổi nó thành một chuỗi bằng cách sử dụng numb.toString(). Sau đó, chúng ta sử dụng padEnd(4, "0") để thêm vào cuối chuỗi để đạt đến độ dài là 4. Kết quả cuối cùng là chuỗi “5000”.
5xxx
Phương thức padEnd() cũng là một tính năng của ECMAScript 2017 và được hỗ trợ trong tất cả các trình duyệt như Chrome, Edge, Firefox, Safari và Opera.
Tuy nhiên, như đã đề cập trước đó, padEnd() không được hỗ trợ trong Internet Explorer, vì vậy nếu bạn cần hỗ trợ cho trình duyệt này, bạn nên xem xét các phương pháp thay thế hoặc sử dụng các kỹ thuật khác để thực hiện chức năng tương tự.
2.12. Có 3 phương thức để trích xuất ký tự từ chuỗi trong JavaScript.
– JavaScript String charAt().
Phương thức charAt() trong JavaScript trả về ký tự ở vị trí (index) được chỉ định trong chuỗi. Đây là một ví dụ:
<html>
<body>
<p id="demo"></p>
<script>
var text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text.charAt(0);
</script>
</body>
</html>Trong ví dụ này, chúng ta có chuỗi text, và chúng ta sử dụng charAt(0) để trả về ký tự ở vị trí 0 trong chuỗi, ký tự “H”.
HPhương thức charAt() rất hữu ích khi bạn cần lấy ra một ký tự cụ thể từ một chuỗi dựa trên vị trí (index) của nó.
– JavaScript String charCodeAt().
Phương thức charCodeAt() trong JavaScript trả về mã Unicode của ký tự tại vị trí (index) được chỉ định trong chuỗi. Mã Unicode này là một số nguyên trong khoảng từ 0 đến 65535 và tương ứng với mã UTF-16 của ký tự đó.
<html>
<body>
<p id="demo"></p>
<script>
let text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text.charCodeAt(0);
</script>
</body>
</html>Trong ví dụ này, chúng ta có chuỗi text và sử dụng phương thức charCodeAt(0) để trả về mã Unicode của ký tự tại vị trí 0 (ký tự “H”) trong chuỗi text, và kết quả là 72.
Phương thức này rất hữu ích khi bạn cần làm việc với các mã Unicode của các ký tự trong chuỗi để thực hiện các phép toán hoặc xử lý văn bản trong các tình huống đặc biệt.
722.13. Property Access.
ECMAScript 5 (2009) cho phép truy cập thuộc tính (property access) bằng cú pháp [ ] trên chuỗi. Điều này cho phép bạn truy cập ký tự trong chuỗi bằng cách sử dụng chỉ số (index).
<html>
<body>
<p id="demo"></p>
<script>
let text = "HELLO WORLD";
document.getElementById("demo").innerHTML = text[0];
</script>
</body>
</html>Trong ví dụ này, chúng ta có chuỗi text và sử dụng [0] để truy cập ký tự tại vị trí 0 (ký tự “H”) trong chuỗi text. Kết quả là “H”.
HLưu ý rằng truy cập thuộc tính bằng cú pháp [ ] có thể hơi khó đoán.
- Nó làm cho chuỗi trông giống như mảng (nhưng thực tế không phải mảng).
- Nếu không tìm thấy ký tự nào,
[ ]trả về undefined, trong khicharAt()trả về một chuỗi rỗng (“”). - Nó là chỉ đọc (read-only). Việc cố gắng gán giá trị vào
str[0]không sinh lỗi nhưng nó không hoạt động.
Dưới đây là ví dụ:
<html>
<body>
<p id="demo"></p>
<script>
let text = "HELLO WORLD";
text[0] = "A"; // Does not work
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>Trong ví dụ này, dù chúng ta đã cố gắng gán giá trị “A” vào text[0], nhưng giá trị của chuỗi text không thay đổi. Điều này chỉ đọc làm cho việc gán giá trị bằng cú pháp [ ] không có tác dụng.
HELLO WORLD2.14. Converting a String to an Array.
Nếu bạn muốn làm việc với một chuỗi như một mảng, bạn có thể chuyển đổi nó thành một mảng.
– JavaScript String split().
Phương thức split() trong JavaScript được sử dụng để chuyển đổi một chuỗi thành một mảng. Bạn chỉ cần xác định dấu phân cách (delimiter) trên dựa vào đó chuỗi sẽ được chia thành các phần tử của mảng.
<html>
<body>
<p id="demo"></p>
<script>
let text = "a,b,c,d,e,f";
const myArray = text.split(",");
document.getElementById("demo").innerHTML = myArray[0];
</script>
</body>
</html>Trong ví dụ này, chúng ta sử dụng split(",") để chia chuỗi text thành một mảng các loại trái cây, sử dụng dấu phân cách là “,”. Kết quả là một mảng fruits với các phần tử là các loại trái cây. Bạn cũng có thể sử dụng dấu phân cách khác nhau (ví dụ: khoảng trắng, “|”, …) trong phương thức split() để tách chuỗi thành các phần tử mảng dựa trên các dấu phân cách đó.
aNếu bạn bỏ qua dấu phân cách (separator) trong phương thức split(), mảng trả về sẽ chứa toàn bộ chuỗi trong chỉ mục [0]. Nếu bạn sử dụng dấu phân cách là “” (chuỗi rỗng), mảng trả về sẽ là một mảng các ký tự đơn.
Ví dụ:
<html>
<body>
<p id="demo"></p>
<script>
let text = "Hello";
const myArr = text.split("");
text = "";
for (let i = 0; i < myArr.length; i++) {
text += myArr[i] + "<br>"
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>Trong ví dụ này, result1 sử dụng split("") để tạo mảng chứa mỗi ký tự là một phần tử. result2 sử dụng split() mà không có dấu phân cách, vì vậy toàn bộ chuỗi “Hello” được chứa trong phần tử đầu tiên của mảng.
H
e
l
l
o
