Trong JavaScript chuỗi (string) là một loại dữ liệu dùng để lưu trữ và làm việc với các dãy ký tự. Chuỗi có thể là một chuỗi các ký tự chữ cái, số hoặc ký tự đặc biệt và chúng được bao quanh bởi dấu nháy đơn (”) hoặc dấu nháy kép (“”).
Bạn có thể khai báo chuỗi bằng cách đặt giá trị của nó vào trong dấu nháy đơn hoặc dấu nháy kép.
<html>
<body>
<p id="demo"></p>
<script>
let text = "John Doe"; // String written inside quotes
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>Kết quả.
John DoeBạn có thể sử dụng dấu nháy đơn hoặc dấu nháy kép:
<html>
<body>
<p id="demo"></p>
<script>
let carName1 = "Volvo XC60"; // Double quotes
let carName2 = 'Volvo XC60'; // Single quotes
document.getElementById("demo").innerHTML =
carName1 + " " + carName2;
</script>
</body>
</html>Kết quả.
Volvo XC60 Volvo XC60Bạn có thể sử dụng dấu nháy trong chuỗi, miễn là chúng không trùng khớp với dấu nháy bao quanh chuỗi:
<html>
<body>
<p id="demo"></p>
<script>
let answer1 = "It's alright";
let answer2 = "He is called 'Johnny'";
let answer3 = 'He is called "Johnny"';
document.getElementById("demo").innerHTML =
answer1 + "<br>" + answer2 + "<br>" + answer3;
</script>
</body>
</html>Kết quả.
It's alright
He is called 'Johnny'
He is called "Johnny"Bạn có thể sử dụng thuộc tính length tích hợp sẵn để lấy độ dài của một chuỗi trong JavaScript. Trong ví dụ dưới đây biến length sẽ chứa độ dài của chuỗi text, nghĩa là số ký tự trong chuỗi đó. Trong trường hợp này, độ dài của chuỗi "ABCDEFGHIJKLMNOPQRSTUVWXYZ" là 26 vì nó bao gồm 26 chữ cái.
<html>
<body>
<p id="demo"></p>
<script>
let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = text.length;
</script>
</body>
</html>Kết quả.
26Chuỗi phải được viết bên trong dấu ngoặc kép hoặc ngoặc đơn.
Nếu bạn cố gắng sử dụng cùng loại dấu ngoặc bên trong chuỗi mà không sử dụng ký tự escape, JavaScript có thể hiểu lầm và cắt chuỗi ở một vị trí không mong muốn.
let text = "We are the so-called "Vikings" from the north.";Ví dụ trong đoạn code trên, chuỗi “We are the so-called “Vikings” from the north.” sẽ bị hiểu sai và cắt ở giữa, gây lỗi.
Để tránh vấn đề này, bạn sử dụng ký tự gạch chéo ngược \ như một ký tự “escape”. Ký tự gạch chéo ngược giúp cho JavaScript biết rằng các dấu ngoặc kép bên trong chuỗi không phải là dấu kết thúc của chuỗi mà chỉ là một phần của nó. Ví dụ: ‘ biểu thị cho dấu nháy đơn, ” biểu thị cho dấu nháy kép, và \ biểu thị cho ký tự gạch chéo ngược.
Chuỗi ký tự ” trong chuỗi JavaScript sẽ chèn một dấu nháy kép vào chuỗi. Điều này cho phép bạn bao quanh một phần của chuỗi bằng dấu nháy kép mà không làm kết thúc chuỗi.
<html>
<body>
<p id="demo"></p>
<script>
let text = "We are the so-called \"Vikings\" from the north.";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>Dấu gạch chéo ngược \ trong chuỗi cho biết rằng “Vikings” là một phần của chuỗi và không làm kết thúc chuỗi. Kết quả của biến text sẽ là chuỗi: “We are the so-called “Vikings” from the north.”
We are the so-called "Vikings" from the north.Chuỗi ký tự ‘ trong chuỗi JavaScript sẽ chèn một dấu nháy đơn vào chuỗi. Điều này cho phép bạn bao quanh một phần của chuỗi bằng dấu nháy đơn mà không làm kết thúc chuỗi.
<html>
<body>
<p id="demo"></p>
<script>
let text = 'It\'s alright.';
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>Dấu gạch chéo ngược (\') trong chuỗi cho biết rằng ‘s’ trong “It’s” là một phần của chuỗi và không làm kết thúc chuỗi. Kết quả của biến text sẽ là chuỗi: “It’s alright.”
It's alright.Còn dấu gạch chéo kép (\\) trong chuỗi sẽ chèn một dấu gạch chéo vào chuỗi. Điều này thường được sử dụng khi bạn muốn in chính dấu gạch chéo trong một chuỗi mà không nói rằng chuỗi đã kết thúc.
<html>
<body>
<p id="demo"></p>
<script>
let text = "The character \\ is called backslash.";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>Dấu gạch chéo kép (\\) cho biết rằng dấu gạch chéo trong chuỗi không phải là một ký tự đặc biệt mà chỉ là một dấu gạch chéo thông thường. Kết quả của biến text sẽ là chuỗi: “The character \ is called backslash.“
The character \ is called backslash.Có sáu chuỗi ký tự escape khác cũng hợp lệ trong JavaScript.
\b: Backspace (xóa lùi)\f: Form Feed (đưa con trỏ đến trang mới)\n: New Line (xuống dòng mới)\r: Carriage Return (di chuyển con trỏ về đầu dòng)\t: Horizontal Tabulator (tab ngang)\v: Vertical Tabulator (tab dọc)
Sáu chuỗi ký tự escape này ban đầu được thiết kế để điều khiển các loại máy đánh chữ, máy teleprinter và máy fax. Chúng không có ý nghĩa gì trong HTML.
Để cải thiện tính đọc hiểu, các lập trình viên thường tránh viết code dài hơn 80 ký tự trên một dòng.
Nếu một câu lệnh JavaScript không thể viết trên một dòng, cách tốt nhất để tách nó là sau một toán tử:
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Hello Dolly!";
</script>
</body>
</html>Kết quả.
Hello Dolly!Bạn cũng có thể tách một dòng code trong một chuỗi văn bản bằng một dấu gạch chéo đơn:
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello \
Dolly!";
</script>
</body>
</html>Output
Hello Dolly!Tuy nhiên, phương pháp sử dụng gạch chéo không phải là phương pháp được ưa chuộng và nó có thể không được hỗ trợ đầy đủ trên tất cả các trình duyệt. Một số trình duyệt không cho phép có khoảng trống đằng sau ký tự.
Một cách an toàn hơn để tách chuỗi là sử dụng phép cộng chuỗi:
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";
</script>
</body>
</html>Kết quả.
Hello Dolly!Bạn không thể tách một dòng code bằng dấu gạch chéo:
<html>
<body>
<p id="demo">You cannot break a code line with a \ backslash.</p>
<script>
document.getElementById("demo").innerHTML = \
"Hello Dolly.";
</script>
</body>
</html>Output.
You cannot break a code line with a \ backslash.Sử dụng phép cộng chuỗi là một cách phổ biến và an toàn để tạo các dòng code dài hơn mà không gây lỗi hoặc khó đọc.
Trong JavaScript, chuỗi thường được coi là các giá trị nguyên thuỷ được tạo từ các chuỗi chữ.
let x = "John";Tuy nhiên, bạn cũng có thể định nghĩa chuỗi như các đối tượng sử dụng new:
<html>
<body>
<p id="demo"></p>
<script>
// x is a string
let x = "John";
// y is an object
let y = new String("John");
document.getElementById("demo").innerHTML =
typeof x + "<br>" + typeof y;
</script>
</body>
</html>Output
string
objectSự khác biệt quan trọng giữa chuỗi nguyên thuỷ và chuỗi như đối tượng là trong cách chúng được xử lý. Chuỗi nguyên thuỷ thường được ưu tiên sử dụng trong phần lớn trường hợp và có cú pháp ngắn gọn hơn. Chuỗi đối tượng có thể có các phương thức và thuộc tính bổ sung, nhưng chúng cũng có thể gây ra sự phức tạp không cần thiết trong code của bạn.
Bạn nên tránh tạo các đối tượng chuỗi (String objects) bằng cách sử dụng từ khóa new nếu không cần thiết. Sự khác biệt chính giữa chuỗi nguyên thủy và đối tượng chuỗi là cách chúng được xử lý.
- Chuỗi nguyên thuỷ (primitive strings), như
"John", là nguyên thuỷ và được so sánh bằng giá trị. - Đối tượng chuỗi (String objects), như
new String("John"), là một đối tượng và được so sánh bằng tham chiếu đối tượng.
Khi bạn sử dụng toán tử ==, JavaScript sẽ thử chuyển đổi giữa chuỗi nguyên thuỷ và đối tượng chuỗi để so sánh chúng bằng giá trị.
<html>
<body>
<p id="demo"></p>
<script>
let x = "John"; // x is a string
let y = new String("John"); // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>
</body>
</html>Kết quả.
trueTuy nhiên, khi sử dụng toán tử ===, JavaScript sẽ so sánh chúng dựa trên giá trị và kiểu dữ liệu, nên chúng không bằng nhau trong trường hợp này.
<html>
<body>
<p id="demo"></p>
<script>
let x = "John"; // x is a string
let y = new String("John"); // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>
</body>
</html>Kết quả.
falseThường thì, bạn nên sử dụng chuỗi nguyên thuỷ khi làm việc với chuỗi vì chúng dễ đọc và hiệu quả hơn trong hầu hết các trường hợp.
Tiếp theo là một ví dụ về sự khác biệt giữa việc sử dụng toán tử == và === trong JavaScript để so sánh giữa hai chuỗi.
Khi sử dụng toán tử == để so sánh x và y, nó chỉ kiểm tra xem giá trị của x và y có giống nhau hay không. Trong trường hợp này, cả x và y đều là đối tượng String với giá trị là "John", vì vậy (x == y) sẽ trả về true.
<html>
<body>
<p id="demo"></p>
<script>
let x = new String("John"); // x is an object
let y = new String("John"); // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>
</body>
</html>Output.
falseTuy nhiên, khi sử dụng toán tử === để so sánh x và y, nó kiểm tra cả giá trị và kiểu dữ liệu của x và y. x là một chuỗi nguyên thủy (primitive string) và y là một đối tượng String. Vì vậy, chúng có kiểu dữ liệu khác nhau. Do đó, (x === y) sẽ trả về false vì chúng không chỉ khác về giá trị mà còn khác về kiểu dữ liệu.
<html>
<body>
<p id="demo"></p>
<script>
let x = new String("John"); // x is an object
let y = new String("John"); // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>
</body>
</html>Output.
falseVề cơ bản, (x == y) kiểm tra giá trị, còn (x === y) kiểm tra cả giá trị và kiểu dữ liệu.
Khi bạn so sánh hai đối tượng JavaScript bằng các toán tử bằng == hoặc ===, chúng luôn trả về false trừ khi chúng đề cập đến cùng một đối tượng trong bộ nhớ.
Điều này xảy ra vì đối tượng là các loại tham chiếu trong JavaScript và khi bạn sử dụng == hoặc ===, nó kiểm tra xem các tham chiếu đến đối tượng có giống nhau không, không phải là kiểm tra nội dung của các đối tượng có giống nhau không.
Để so sánh nội dung của hai đối tượng, bạn sẽ cần lặp qua các thuộc tính của chúng và so sánh từng thuộc tính một, hoặc sử dụng một thư viện hoặc hàm tiện ích cung cấp so sánh độ sâu.
