Xử lý văn bản — chuỗi trong JavaScript

Sức mạnh của từ ngữ

Từ ngữ rất quan trọng đối với con người — chúng là một phần lớn trong cách chúng ta giao tiếp. Vì web là một phương tiện chủ yếu dựa trên văn bản được thiết kế để cho phép con người giao tiếp và chia sẻ thông tin, nên hữu ích khi chúng ta có quyền kiểm soát các từ xuất hiện trên nó. HTML cung cấp cấu trúc và ý nghĩa cho văn bản, CSS cho phép chúng ta tạo kiểu chính xác cho nó, và JavaScript cung cấp nhiều tính năng để thao tác chuỗi. Những tính năng này bao gồm tạo thông điệp và lời nhắc chào mừng tùy chỉnh, hiển thị nhãn văn bản đúng khi cần, sắp xếp các thuật ngữ theo thứ tự mong muốn và nhiều hơn nữa.

Hầu hết tất cả các chương trình chúng ta đã cho bạn thấy trong khóa học này đều liên quan đến một số thao tác chuỗi.

Khai báo chuỗi

Chuỗi được xử lý tương tự như số khi mới nhìn qua, nhưng khi bạn đào sâu hơn bạn sẽ bắt đầu thấy một số sự khác biệt đáng chú ý. Hãy bắt đầu bằng cách nhập một số dòng cơ bản vào bảng điều khiển (console) nhà phát triển trình duyệt để làm quen.

Để bắt đầu, nhập các dòng sau:

const string = "The revolution will not be televised.";
console.log(string);

Giống như chúng ta đã làm với số, chúng ta khai báo một biến, khởi tạo nó với giá trị chuỗi, và sau đó trả về giá trị. Sự khác biệt duy nhất ở đây là khi viết một chuỗi, bạn cần bao quanh giá trị bằng dấu nháy.

Nếu bạn không làm điều này, hoặc bỏ lỡ một trong các dấu nháy, bạn sẽ gặp lỗi. Hãy thử nhập các dòng sau:

const badString1 = This is a test;
const badString2 = 'This is a test;
const badString3 = This is a test';

Những dòng này không hoạt động vì bất kỳ văn bản nào không có dấu nháy xung quanh đều được hiểu là tên biến, tên thuộc tính, từ dành riêng hoặc tương tự. Nếu trình duyệt không nhận ra văn bản không có dấu nháy, thì một lỗi sẽ được phát sinh (ví dụ: "missing; before statement"). Nếu trình duyệt có thể phát hiện nơi bắt đầu chuỗi nhưng không phải cuối của nó (do thiếu dấu nháy thứ hai), nó có thể báo lỗi "unterminated string literal", hoặc trong bảng điều khiển (console), nhảy sang dòng mới và mong bạn hoàn thành chuỗi ở đó. Nếu chương trình của bạn đang gặp những lỗi như vậy, hãy quay lại và kiểm tra tất cả chuỗi của bạn để đảm bảo bạn không thiếu dấu nháy nào.

Đoạn sau sẽ hoạt động nếu bạn đã định nghĩa biến string trước đó — hãy thử ngay bây giờ:

const badString = string;
console.log(badString);

badString bây giờ được đặt để có cùng giá trị với string.

Dấu nháy đơn, dấu nháy kép và backtick

Trong JavaScript, bạn có thể chọn dấu nháy đơn ('), dấu nháy kép ("), hoặc backtick (`) để bọc chuỗi của bạn. Tất cả những cách sau đều sẽ hoạt động:

const single = 'Single quotes';
const double = "Double quotes";
const backtick = `Backtick`;

console.log(single);
console.log(double);
console.log(backtick);

Bạn phải sử dụng cùng ký tự cho đầu và cuối của chuỗi, hoặc bạn sẽ gặp lỗi:

const badQuotes = 'This is not allowed!";

Chuỗi được khai báo bằng dấu nháy đơn và chuỗi được khai báo bằng dấu nháy kép là như nhau, và bạn sử dụng cái nào là tùy theo sở thích cá nhân — mặc dù thực hành tốt là chọn một phong cách và sử dụng nó nhất quán trong mã của bạn.

Chuỗi được khai báo bằng backtick là một loại chuỗi đặc biệt gọi là template literal. Template literal hầu hết hoạt động giống như chuỗi thông thường, nhưng chúng có một số thuộc tính đặc biệt:

• Bạn có thể nhúng JavaScript vào chúng.
• Bạn có thể khai báo template literal trên nhiều dòng.

Nhúng JavaScript

Bên trong một template literal, bạn có thể bọc các biến hoặc biểu thức JavaScript bên trong ${ }, và kết quả sẽ được bao gồm trong chuỗi:

const name = "Chris";
const greeting = `Hello, ${name}`;
console.log(greeting); // "Hello, Chris"

Bạn có thể sử dụng cùng kỹ thuật để nối hai biến lại với nhau:

const one = "Hello, ";
const two = "how are you?";
const joined = `${one}${two}`;
console.log(joined); // "Hello, how are you?"

Việc nối các chuỗi lại với nhau như thế này được gọi là nối chuỗi (concatenation).

Nối chuỗi trong ngữ cảnh

Hãy xem nối chuỗi đang được sử dụng trong thực tế:

<button>Press me</button>
<div id="greeting"></div>

const button = document.querySelector("button");

function greet() {
  const name = prompt("What is your name?");
  const greeting = document.querySelector("#greeting");
  greeting.textContent = `Hello ${name}, nice to see you!`;
}

button.addEventListener("click", greet);

Ở đây, chúng ta đang sử dụng hàm window.prompt(), nhắc người dùng trả lời một câu hỏi qua hộp thoại popup và sau đó lưu văn bản họ nhập vào trong một biến nhất định — trong trường hợp này là name. Sau đó, chúng ta hiển thị một chuỗi chèn tên vào thông điệp chào hỏi chung.

Nối chuỗi sử dụng "+"

Bạn chỉ có thể sử dụng ${} với template literal, không phải chuỗi thông thường. Bạn có thể nối chuỗi thông thường bằng toán tử +:

const greeting2 = "Hello";
const name2 = "Bob";
console.log(greeting2 + ", " + name2); // "Hello, Bob"

Tuy nhiên, template literal thường cho bạn mã dễ đọc hơn:

const greeting3 = "Howdy";
const name3 = "Ramesh";
console.log(`${greeting3}, ${name3}`); // "Howdy, Ramesh"

Bao gồm biểu thức trong chuỗi

Bạn có thể bao gồm các biểu thức JavaScript trong template literal, cũng như chỉ là biến, và kết quả sẽ được bao gồm trong kết quả:

const song = "Fight the Youth";
const score = 9;
const highestScore = 10;
const output = `I like the song ${song}. I gave it a score of ${
  (score / highestScore) * 100
}%.`;
console.log(output); // "I like the song Fight the Youth. I gave it a score of 90%."

Chuỗi nhiều dòng

Template literal tuân theo các ngắt dòng trong mã nguồn, vì vậy bạn có thể viết các chuỗi trải rộng nhiều dòng như thế này:

const newline = `One day you finally knew
what you had to do, and began,`;
console.log(newline);

/*
One day you finally knew
what you had to do, and began,
*/

Để có đầu ra tương đương sử dụng chuỗi thông thường, bạn phải bao gồm các ký tự ngắt dòng (\n) trong chuỗi:

const newline2 = "One day you finally knew\nwhat you had to do, and began,";
console.log(newline2);

/*
One day you finally knew
what you had to do, and began,
*/

Xem trang tham khảo Template literals của chúng ta để biết thêm ví dụ và chi tiết về các tính năng nâng cao.

Bao gồm dấu nháy trong chuỗi

Vì chúng ta sử dụng dấu nháy để chỉ đầu và cuối chuỗi, làm thế nào chúng ta có thể bao gồm dấu nháy thực sự trong chuỗi? Chúng ta biết điều này sẽ không hoạt động:

const badQuotes = "She said "I think so!"";

Một tùy chọn phổ biến là sử dụng một trong các ký tự khác để khai báo chuỗi:

const goodQuotes1 = 'She said "I think so!"';
const goodQuotes2 = `She said "I'm not going in there!"`;

Một tùy chọn khác là thoát dấu nháy có vấn đề. Thoát ký tự có nghĩa là chúng ta làm điều gì đó với chúng để đảm bảo chúng được nhận dạng là văn bản, không phải là một phần của mã. Trong JavaScript, chúng ta thực hiện điều này bằng cách đặt dấu gạch chéo ngược ngay trước ký tự. Hãy thử điều này:

const bigmouth = 'I\'ve got no right to take my place…';
console.log(bigmouth);

Bạn có thể sử dụng cùng kỹ thuật để chèn các ký tự đặc biệt khác. Xem Chuỗi thoát (Escape sequences) để biết thêm chi tiết.

Số so với chuỗi

Điều gì xảy ra khi chúng ta cố gắng nối một chuỗi và một số? Hãy thử trong bảng điều khiển (console) của chúng ta:

const coolBandName = "Front ";
const number = 242;
console.log(coolBandName + number); // "Front 242"

Bạn có thể mong đợi điều này trả về lỗi, nhưng nó hoạt động tốt. Cách số được hiển thị như chuỗi được xác định khá rõ ràng, vì vậy trình duyệt tự động chuyển đổi số thành chuỗi và nối hai chuỗi lại với nhau.

Nếu bạn có một biến số mà bạn muốn chuyển đổi thành chuỗi hoặc một biến chuỗi mà bạn muốn chuyển đổi thành số, bạn có thể sử dụng hai cấu trúc sau:

• Hàm Number() chuyển đổi bất kỳ thứ gì được truyền cho nó thành số nếu có thể. Hãy thử đoạn sau:

  js

  const myString = "123";
  const myNum = Number(myString);
  console.log(typeof myNum);
  // number
  

• Ngược lại, hàm String() chuyển đổi đối số của nó thành chuỗi. Hãy thử điều này:

  js

  const myNum2 = 123;
  const myString2 = String(myNum2);
  console.log(typeof myString2);
  // string
  

Những cấu trúc này có thể thực sự hữu ích trong một số tình huống. Ví dụ, nếu người dùng nhập một số vào trường văn bản của biểu mẫu, đó là một chuỗi. Tuy nhiên, nếu bạn muốn thêm số này vào điều gì đó, bạn sẽ cần nó là một số, vì vậy bạn có thể truyền nó qua Number() để xử lý điều này. Chúng ta đã làm chính xác điều này trong Trò chơi đoán số, trong hàm checkGuess.

Tóm tắt

Vậy là đó, những điều cơ bản nhất về chuỗi được đề cập trong JavaScript. Trong bài tiếp theo, chúng ta sẽ xây dựng trên điều này, xem xét một số phương thức tích hợp có sẵn cho chuỗi trong JavaScript và cách chúng ta có thể sử dụng chúng để thao tác chuỗi của mình thành dạng chúng ta muốn.

• Previous
• Overview: Lập trình động với JavaScript
• Next