1. Giới thiệu

String 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. Chuỗi trong JavaScript là kiểu dữ liệu nguyên thủy và không thay đổi, có nghĩa là chúng không thay đổi.

Vì chuỗi là cách chúng 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 chúng 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, chúng ta sẽ tìm hiểu cách tạo và xem đầu ra của chuỗi, cách nối các chuỗi, cách lưu trữ chuỗi trong biến và quy tắc sử dụng dấu nháy kép, dấu nháy đơn và thêm dòng mới trong chuỗi của JavaScript.

2. Tạo chuỗi

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

Các chuỗi sử dụng dấu nháy kép và dấu nháy đơn có hiệu quả giống 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à sự nhất quán trong các file code.

'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à template literal. Các ký tự mẫu sử dụng cần gạt ngược (còn được gọi là dấu trọng âm) và hoạt động giống như các chuỗi thông thường với một số phần bổ sung mà chúng tôi sẽ đề cập trong bài viết này.

`This string uses backticks.`;

Output
This is a string in the console.

Có thể dùng console.log() hoặc alert() để xem kết quả trên trình duyệt.

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

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

Các biến trong JavaScript là các vùng chứa được đặt tên để lưu trữ một giá trị, sử dụng các từ khóa var, const hoặc let. Chúng 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.";

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, chúng ta không phải nhập lại một chuỗi mỗi khi chúng ta muốn sử dụng nó, giúp chúng ta làm việc và thao tác với các chuỗi trong chương trình của mình đơn giản hơn.

4. Kết nối chuỗi

Nối cuỗi tức 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 chuỗi, chúng 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.

"Sea" + "horse";

Output
Seahorse

Kết 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 chúng ta muốn có khoảng trắng giữa các từ Sea and horse, chúng ta sẽ 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

Chúng ta có thể nối các chuỗi và biến như sau :

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

5. Biến trong chuỗi với Template Literals

Một tính năng đặc biệt của tính năng Template Literals 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, chúng 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ư chúng ta có thể thấy, các biểu thức trong các Template Literals 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.

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

Bạn có thể nhận thấy rằng các chuỗi chúng tôi viết trong code được đặt trong dấu nháy 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ỳ câu 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 chuỗi ký tự là chuỗi được viết trong source code, bao gồm cả các dấu trích dẫn. Giá trị chuỗi là những gì chúng ta thấy trong đầu ra 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.

7. Thoát khỏi dấu trích dẫ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 code.

Ví dụ :

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 nháy kép trong một chuỗi được dùng dấu nháy kép.

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

• Cú pháp chuỗi đối lập
• Ký tự thoát
• Chữ mẫu (Template literals) Chúng 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ị đứt 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ụ:

"We're safely using an apostrophe in double quotes."
Quotation marks in strings built with '.

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

Theo cách chúng ta kết hợp dấu nháy đơn và dấu nháy kép, chúng 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 chúng ta. Tuy nhiên, khi chúng tôi đang tìm cách để sử dụng cú pháp nhất quán trong các file code, điều này có thể khó duy trì trong toàn bộ cơ sở code.

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

Chúng ta có thể sử dụng dấu gạch chéo ngược (\) (ký tự thoát) để 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à dấu nháy kép mà không sợ làm đứt chuỗi.

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

'We\'re safely using an apostrophe in single quotes.'
We can also use quotation marks in strings built with ".

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

Phương thức 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ẽ khiến việc thoát trở nên cần thiết.

Sử dụng chữ mẫu (template literals)

Các ký tự của 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ó thể được sử dụng một cách an toàn mà không cần phải xem xét hoặc 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 việc 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à chúng 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.

Với chuỗi dài và tạo dòng mới

Đôi khi, bạn có thể muốn chèn một ký tự xuống dòng trong chuỗi của mình. Các ký tự \ n hoặc\ r có thể được sử dụng để chèn một dòng mới trong đầu ra của code.

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 đầu ra của 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. Chúng 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, chúng ta có thể sử dụng ký tự \để 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.

Để làm cho code dễ đọc hơn, thay vào đó chúng 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ở code 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, chúng tôi đã 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 ký tự chuỗi bằng cách sử dụng dấu nháy kép và đơn, tạo các ký tự mẫu, nối, thoát và gán giá trị chuỗi cho các biến.

Nguồn : https://www.digitalocean.com/community/tutorials/how-to-work-with-strings-in-javascript