Cách làm việc với chuỗi trong JavaScript

Chuỗi là một chuỗi gồm một hoặc nhiều ký tự có thể bao gồm các chữ cái, số hoặc ký hiệu. Các chuỗi trong JavaScript là kiểu dữ liệu nguyên thủy và không thay đổi, nghĩa là chúng không thay đổi.

---

Vì chuỗi là cách ta hiển thị và làm việc với văn bản, và văn bản là cách giao tiếp và hiểu chính của ta thông qua máy tính, chuỗi là một trong những khái niệm cơ bản nhất của lập trình để làm quen.

Trong bài viết này, ta sẽ tìm hiểu cách tạo và xem kết quả của chuỗi, cách nối chuỗi, cách lưu trữ chuỗi trong biến và luật sử dụng dấu ngoặc kép, dấu nháy đơn và dòng mới trong chuỗi trong JavaScript.

Tạo và xem kết quả của chuỗi

Trong JavaScript, có ba cách để viết một chuỗi - chúng có thể được viết bên trong dấu ngoặc kép ( ' ' ), dấu ngoặc kép ( " " ) hoặc dấu ngoặc kép ( ` ` ). Kiểu trích dẫn được sử dụng phải phù hợp với cả hai bên, tuy nhiên có thể cả ba kiểu đều được dùng trong cùng một kịch bản.

Các chuỗi sử dụng dấu ngoặc kép và dấu nháy đơn có hiệu quả như nhau. Vì không có quy ước hoặc ưu tiên chính thức cho các chuỗi được trích dẫn đơn hoặc kép, tất cả những gì quan trọng là giữ nhất quán trong các file chương trình dự án.

'This string uses single quotes.'; 

"This string uses double quotes."; 

Cách thứ ba và mới nhất để tạo một chuỗi được gọi là mẫu theo nghĩa đen . Các ký tự mẫu sử dụng cần gạt ngược ( còn gọi là dấu trọng âm) và hoạt động giống như các chuỗi ký tự thông thường với một số phần thưởng bổ sung mà ta sẽ đề cập trong bài viết này.

`This string uses backticks.`; 

Cách dễ nhất để xem kết quả của một chuỗi là in nó ra console , với console.log() :

console.log("This is a string in the console."); 

Output
This is a string in the console. 

Một cách đơn giản khác để xuất một giá trị là gửi một cửa sổ bật lên cảnh báo tới trình duyệt với alert() :

alert("This is a string in an alert."); 

Chạy dòng trên sẽ tạo ra kết quả sau trong giao diện user của trình duyệt:

alert() là một phương pháp kiểm tra và xem kết quả ít phổ biến hơn, vì nó có thể nhanh chóng trở nên tẻ nhạt khi đóng cảnh báo.

Lưu trữ một chuỗi trong một biến

Các biến trong JavaScript được đặt tên là các containers lưu trữ một giá trị, sử dụng các từ khóa var , const hoặc let . Ta có thể gán giá trị của một chuỗi cho một biến được đặt tên.

const newString = "This is a string assigned to a variable."; 

Bây giờ biến newString chứa chuỗi của ta , ta có thể tham chiếu nó và in nó ra console .

console.log(newString); 

Điều này sẽ xuất ra giá trị chuỗi.

Output
This is a string assigned to a variable. 

Bằng cách sử dụng các biến để thay thế cho chuỗi, ta không phải nhập lại chuỗi mỗi khi ta muốn sử dụng nó, giúp ta làm việc và thao tác với chuỗi trong chương trình của bạn đơn giản hơn.

Kết nối chuỗi

Nối nghĩa là nối hai hoặc nhiều chuỗi lại với nhau để tạo ra một chuỗi mới. Để nối, ta sử dụng toán tử nối, được biểu diễn bằng ký hiệu + . Ký hiệu + cũng là toán tử cộng khi được sử dụng với các phép toán số học.

Hãy tạo một ví dụ đơn giản của nối, giữa "Sea" và "horse" .

"Sea" + "horse"; 

Output
Seahorse 

Phép nối nối các chuỗi từ đầu đến cuối, kết hợp chúng và xuất ra một giá trị chuỗi hoàn toàn mới. Nếu ta muốn có một khoảng trắng giữa các từ Sea and horse , ta cần bao gồm một ký tự khoảng trắng vào một trong các chuỗi:

"Sea " + "horse"; 

Output
Sea horse 

Ta nối các chuỗi và biến chứa các giá trị chuỗi bằng phép nối.

const poem = "The Wide Ocean"; const author = "Pablo Neruda";  const favePoem = "My favorite poem is " + poem + " by " + author + "."; 

Output
My favorite poem is The Wide Ocean by Pablo Neruda. 

Khi ta kết hợp hai hoặc nhiều chuỗi thông qua phép nối, ta đang tạo một chuỗi mới mà ta có thể sử dụng trong suốt chương trình của bạn .

Các biến trong chuỗi có chữ mẫu

Một tính năng đặc biệt của tính năng chữ mẫu là khả năng bao gồm các biểu thức và biến trong một chuỗi. Thay vì phải sử dụng phép nối, ta có thể sử dụng cú pháp ${} để chèn một biến.

const poem = "The Wide Ocean"; const author = "Pablo Neruda";  const favePoem = `My favorite poem is ${poem} by ${author}.`; 

Output
My favorite poem is The Wide Ocean by Pablo Neruda. 

Như ta có thể thấy, bao gồm các biểu thức trong các ký tự mẫu là một cách khác để đạt được kết quả tương tự. Trong trường hợp này, sử dụng các ký tự mẫu có thể dễ viết hơn và thuận tiện hơn.

Chuỗi chữ và giá trị chuỗi

Bạn có thể nhận thấy rằng các chuỗi ta viết trong mã nguồn được đặt trong dấu ngoặc kép hoặc dấu gạch ngược, nhưng kết quả in thực tế không bao gồm bất kỳ trích dẫn nào.

"Beyond the Sea";  

Output
Beyond the Sea 

Có một sự khác biệt khi đề cập đến từng điều này. Một ký tự chuỗi là chuỗi được viết trong mã nguồn, bao gồm cả các trích dẫn. Giá trị chuỗi là những gì ta thấy trong kết quả và không bao gồm dấu ngoặc kép.

Trong ví dụ trên, "Beyond the Sea" là một chuỗi theo nghĩa đen và Beyond the Sea là một giá trị chuỗi.

Thoát khỏi trích dẫn và dấu huyền trong chuỗi

Do thực tế là dấu ngoặc kép được sử dụng để biểu thị chuỗi, cần phải xem xét đặc biệt khi sử dụng dấu nháy đơn và dấu ngoặc kép trong chuỗi. Ví dụ: cố gắng sử dụng dấu nháy đơn ở giữa chuỗi được trích dẫn đơn lẻ sẽ kết thúc chuỗi và JavaScript sẽ cố gắng phân tích cú pháp phần còn lại của chuỗi dự định dưới dạng mã.

Ta có thể thấy điều này bằng cách cố gắng sử dụng một dấu nháy đơn trong sự co lại của I'm dưới đây:

const brokenString = 'I'm a broken string';  console.log(brokenString); 

Output
unknown: Unexpected token (1:24) 

Điều tương tự cũng sẽ áp dụng cho việc cố gắng sử dụng dấu ngoặc kép trong một chuỗi được trích dẫn kép.

Để tránh xảy ra lỗi trong những trường hợp này, ta có một số tùy chọn mà ta có thể sử dụng:

• Cú pháp chuỗi đối lập
• Ký tự thoát
• Chữ mẫu

Ta sẽ khám phá các tùy chọn này bên dưới.

Sử dụng cú pháp chuỗi thay thế

Một cách dễ dàng để giải quyết các trường hợp cá biệt về chuỗi có khả năng bị hỏng là sử dụng cú pháp chuỗi ngược lại với cú pháp mà bạn hiện đang sử dụng.

Ví dụ: dấu nháy đơn trong chuỗi được xây dựng bằng " .

"We're safely using an apostrophe in double quotes." 

Dấu ngoặc kép trong chuỗi được xây dựng bằng ' .

'Then he said, "Hello, World!"'; 

Theo cách ta kết hợp dấu nháy đơn và dấu nháy kép, ta có thể kiểm soát việc hiển thị dấu ngoặc kép và dấu nháy đơn trong chuỗi của ta . Tuy nhiên, khi ta đang làm việc để sử dụng cú pháp nhất quán trong các file lập trình dự án, điều này có thể khó duy trì trong toàn bộ cơ sở mã.

Sử dụng ký tự thoát ( \ )

Ta có thể sử dụng ký tự thoát sau dấu gạch chéo ngược ( \ ) để ngăn JavaScript diễn giải một câu trích dẫn là phần cuối của chuỗi.

Cú pháp của \' sẽ luôn là một dấu nháy đơn và cú pháp của \" sẽ luôn là một dấu nháy kép mà không sợ làm đứt chuỗi.

Sử dụng phương pháp này, ta có thể sử dụng dấu nháy đơn trong chuỗi được xây dựng bằng " .

'We\'re safely using an apostrophe in single quotes.' 

Ta cũng có thể sử dụng dấu ngoặc kép trong chuỗi được xây dựng bằng " .

"Then he said, \"Hello, World!\""; 

Phương pháp này trông hơi lộn xộn hơn một chút, nhưng bạn có thể cần sử dụng cả dấu nháy đơn và dấu ngoặc kép trong cùng một chuỗi, điều này sẽ làm cho việc thoát trở nên cần thiết.

Sử dụng chữ mẫu

Các ký tự mẫu được xác định bằng dấu gạch ngược, và do đó, cả dấu ngoặc kép và dấu nháy đơn đều được dùng một cách an toàn mà không cần phải xem xét hoặc thoát thêm bất kỳ hình thức nào.

`We're safely using apostrophes and "quotes" in a template literal.`; 

Ngoài việc ngăn chặn nhu cầu thoát ký tự và cho phép các biểu thức nhúng, các nghĩa đen của mẫu cũng cung cấp hỗ trợ nhiều dòng, điều mà ta sẽ thảo luận trong phần tiếp theo .

Với cú pháp chuỗi xen kẽ, sử dụng các ký tự thoát và sử dụng các ký tự mẫu, có một số cách để tạo một chuỗi một cách an toàn.

Chuỗi dài và dòng mới

Đôi khi bạn có thể cần chèn một ký tự xuống dòng hoặc ký tự xuống dòng trong chuỗi của bạn . Các ký tự \n hoặc \r được dùng để chèn một dòng mới trong kết quả của mã.

const threeLines = "This is a string\nthat spans across\nthree lines."; 

Output
This is a string that spans across three lines. 

Về mặt kỹ thuật, điều này hoạt động để có được kết quả của ta trên nhiều dòng. Tuy nhiên, viết một chuỗi rất dài trên một dòng sẽ nhanh chóng trở nên rất khó đọc và làm việc. Ta có thể sử dụng toán tử nối để hiển thị chuỗi trên nhiều dòng.

const threeLines = "This is a string\n" + "that spans across\n" + "three lines."; 

Thay vì nối nhiều chuỗi, ta có thể sử dụng ký tự \ Escape để thoát dòng mới.

const threeLines = "This is a string\n\ that spans across\n\ three lines."; 

Lưu ý : Phương pháp này không được ưu tiên vì nó có thể gây ra sự cố với một số trình duyệt và trình thu nhỏ.

Để làm cho mã dễ đọc hơn, thay vào đó ta có thể sử dụng các chuỗi ký tự mẫu. Những điều này loại bỏ sự cần thiết phải nối hoặc thoát trên các chuỗi dài có chứa các dòng mới. Chuỗi cũng như dòng mới sẽ được giữ nguyên.

const threeLines = `This is a string that spans across three lines.`; 

Output
This is a string that spans across three lines. 

Điều quan trọng là phải biết tất cả các cách tạo dòng mới và chuỗi trải dài trên nhiều dòng, vì các cơ sở mã khác nhau có thể đang sử dụng các tiêu chuẩn khác nhau.

Kết luận

Trong bài viết này, ta đã giới thiệu cho các bạn những điều cơ bản về cách làm việc với chuỗi trong JavaScript, từ việc tạo và hiển thị các chuỗi ký tự bằng cách sử dụng dấu ngoặc kép đơn và kép, tạo các chuỗi ký tự mẫu, nối, thoát và gán giá trị chuỗi cho các biến.

---

---

Các tin liên quan

Giới thiệu về Maps bằng JavaScript
2017-07-06
Hiểu cú pháp và cấu trúc mã trong JavaScript
2017-07-05
Cách thêm JavaScript vào HTML
2017-06-30
Cách sử dụng control panel dành cho nhà phát triển JavaScript
2017-06-29
Cách viết comment bằng JavaScript
2017-06-20
Hiểu các loại dữ liệu trong JavaScript
2017-06-01
Phương thức chuỗi padStart và padEnd trong JavaScript
2017-02-17
Các chữ mẫu được gắn thẻ trong JavaScript (ES6 / ES2015)
2017-02-07
Bắt đầu với Trực quan hóa Dữ liệu Sử dụng JavaScript và Thư viện D3
2016-12-28
Bắt đầu với Trực quan hóa Dữ liệu Sử dụng JavaScript và Thư viện D3
2016-12-28