JavaScript Strings - Các chuỗi trong JavaScript
Các chuỗi JavaScript dùng để chứa và vận dụng văn bản.
Các chuỗi trong JavaScript(JavaScript Strings)
Một chuỗi là không hoặc nhiều hơn các kí tự được viết bên trong các dấu nháy.
ví dụ
var x = "John Doe";<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p id="demo"></p>
<script>
var x = "John Doe"; // String written inside quotes
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Bạn có thể dùng nháy đơn hoặc đôi:
ví dụ
var carName1 = "Volvo XC60"; // Double quotes
var carName2 = 'Volvo XC60'; // Single quotes<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Strings are written inside quotes. You can use single or double quotes:</p>
<p id="demo"></p>
<script>
var carName1 = "Volvo XC60"; // Double quotes
var carName2 = 'Volvo XC60'; // Single quotes
document.getElementById("demo").innerHTML =
carName1 + " " + carName2;
</script>
</body>
</html>
Bạn có thể sử dụng các dấu nháy bên trong một chuỗi, miễn là chúng không trùng với các dấu nháy bao quanh chuỗi:
ví dụ
var answer1 = "It's alright";
var answer2 = "He is called 'Johnny'";
var answer3 = 'He is called "Johnny"';<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>You can use quotes inside a string, as long as they don't match the quotes surrounding the string.</p>
<p id="demo"></p>
<script>
var answer1 = "It's alright";
var answer2 = "He is called 'Johnny'";
var answer3 = 'He is called "Johnny"';
document.getElementById("demo").innerHTML =
answer1 + "<br>" + answer2 + "<br>" + answer3;
</script>
</body>
</html>Độ dài của chuỗi
Để tìm độ dài của một chuỗi, sử dụng thuộc tính được xây dựng length :
ví dụ
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Properties</h2>
<p>The length property returns the length of a string:</p>
<p id="demo"></p>
<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = txt.length;
</script>
</body>
</html>Kí tự Escape(Escape Character)
Bởi vì các chuỗi phải được viết trong các dấu nháy, JavaScript sẽ hiểu lầm chuỗi sau:
var x = "We are the so-called "Vikings" from the north.";Chuỗi sẽ bị cắt thành "We are the so-called ".
Giải pháp để tránh vấn đề này, là dùng kí tự gạch chéo ngược escape(thoát) .
Kí tự gạch chéo ngược escape (\) biến các kí tự đặc biệt thành chuỗi:
| Code | Kết quả | Mô tả |
|---|---|---|
| \' | ' | Nháy đơn |
| \" | " | Nháy đôi |
| \\ | \ | Dấu gạch chéo ngược |
Nối tiếp chuỗi bằng \" chèn một dấu nháy đôi vào một trong chuỗi:
ví dụ
var x = "We are the so-called \"Vikings\" from the north.";<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>The escape sequence \" inserts a double quote in a string.</p>
<p id="demo"></p>
<script>
var x = "We are the so-called \"Vikings\" from the north.";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Nối tiếp chuỗi bằng \' chèn một dấu nháy đơn vào một chuỗi:
ví dụ
var x = 'It\'s alright.';<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>The escape sequence \' inserts a single quote in a string.</p>
<p id="demo"></p>
<script>
var x = 'It\'s alright.';
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Nối tiếp chuỗi bằng \\ chèn một dấu gạch chéo ngược vào một chuỗi:
ví dụ
var x = "The character \\ is called backslash.";<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>The escape sequence \\ inserts a backslash in a string.</p>
<p id="demo"></p>
<script>
var x = "The character \\ is called backslash.";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Sáu kí tự nối escape hợp lệ trong JavaScript:
| Code | Kết Quả |
|---|---|
| \b | Cách |
| \f | Form Feed |
| \n | Xuống dòng |
| \r | Carriage Return |
| \t | Tab ngang |
| \v | Tab dọc |
Tip: 6 kí tự escape trên từng là thiết kế ban dầu để điều khiển máy đánh chữ, điện báo, và máy fax. Chúng không có nghĩa trong HTML.
Ngắt các dòng code dài
Cho việc đọc dễ dàng nhất, các lập trình viên thường muốn tránh các dòng code dài hơn 80 kí tự.
Nếu một câu lệnh JavaScript không vừa trên một dòng, vị trí tốt nhất để ngắt nó là sau một toán tử:
ví dụ
document.getElementById("demo").innerHTML =
"Hello Dolly!";<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>
The best place to break a code line is after an operator or a comma.
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Hello Dolly!";
</script>
</body>
</html>
Bạn cũng thể ngắt một dòng code giữa một chuỗi văn bản bằng một dấu gạch chéo ngược:
ví dụ
document.getElementById("demo").innerHTML = "Hello \
Dolly!";<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>
You can break a code line within a text string with a backslash.
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello \
Dolly!";
</script>
</body>
</html>
Tip: Phương thức \ không phải là một phương thức được ưa chuộng. Nó có thể không được hỗ trợ bởi rộng rãi. Một vài trình duyệt không cho phép khoẳng trắng đằng sau kí tự \.
Một cách an toàn hơn để ngắt dòng, là dùng cộng chuỗi:
ví dụ
document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>The safest way to break a code line in a string is using string addition.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello " +
"Dolly!";
</script>
</body>
</html>
Bạn không thể ngắt một dòng code với một dấu gạch chéo ngược:
ví dụ
document.getElementById("demo").innerHTML = \
"Hello Dolly!";<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p id="demo">You cannot break a code line with a \ backslash.</p>
<script>
document.getElementById("demo").innerHTML = \
"Hello Dolly.";
</script>
</body>
</html>
Các chuỗi có thể là các đối tượng
Bình thường, các chuỗi JavaScript là các giá trị nguyên thủy, được tạo ra từ các chữ cố định:
var firstName = "John";
Nhưng các chuỗi cũng có thể được xác định như một đối tượng với từ khóa new:
var firstName = new String("John");
ví dụ
var x = "John";
var y = new String("John");
// typeof x will return string
// typeof y will return object<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = "John"; // x is a string
var y = new String("John"); // y is an object
document.getElementById("demo").innerHTML =
typeof x + "<br>" + typeof y;
</script>
</body>
</html>
Tip: Đừng tạo các chuỗi như các đối tượng. Nó làm chậm tốc độ thực thi.
Từ khóa new làm phức tạp code. Điều này có thể dẫn đến một số kết quả không ngờ tới:
Khi dùng toán tử == , các chuỗi tương đương sẽ bằng nhau:
ví dụ
var x = "John";
var y = new String("John");
// (x == y) is true because x and y have equal values<!DOCTYPE html>
<html>
<body>
<h2>Never Create Strings as objects.</h2>
<p>Strings and objects cannot be safely compared.</p>
<p id="demo"></p>
<script>
var x = "John"; // x is a string
var y = new String("John"); // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>
</body>
</html>
Khi dùng toán tử === , các chuỗi tương đương sẽ không bằng nhau, bởi vì toán tử === yêu cầu sự tương đương giữa cả kiểu và giá trị.
ví dụ
var x = "John";
var y = new String("John");
// (x === y) is false because x and y have different types (string and object)<!DOCTYPE html>
<html>
<body>
<h2>Never Create Strings as objects.</h2>
<p>Strings and objects cannot be safely compared.</p>
<p id="demo"></p>
<script>
var x = "John"; // x is a string
var y = new String("John"); // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>
</body>
</html>
Hoặc còn tệ hơn. Các đối tượng không thể so sánh:
ví dụ
var x = new String("John");
var y = new String("John");
// (x == y) is false because x and y are different objects<!DOCTYPE html>
<html>
<body>
<h2>Never Create Strings as objects.</h2>
<p>JavaScript objects cannot be compared.</p>
<p id="demo"></p>
<script>
var x = new String("John"); // x is an object
var y = new String("John"); // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>
</body>
</html>ví dụ
var x = new String("John");
var y = new String("John");
// (x === y) is false because x and y are different objects<!DOCTYPE html>
<html>
<body>
<h2>Never Create Strings as objects.</h2>
<p>JavaScript objects cannot be compared.</p>
<p id="demo"></p>
<script>
var x = new String("John"); // x is an object
var y = new String("John"); // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>
</body>
</html>
Tip: Hãy ghi chú lại sự khác biệt giữa (x==y) vàa (x===y) .
So sánh hai đối tượng JavaScript sẽ luôn luôn trả về false.
Tags:
