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

Giới thiệu

Một chuỗi (string) là một tập hợp của một hoặc nhiều ký tự mà có thể bao gồm chữ cái, số hoặc biểu tượng. Các 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 chuỗi, cách lưu trữ chuỗi trong biến và quy tắc 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 đầu ra của chuỗi

zzzTrong 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ó thể được sử 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ả 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à giữ nhất quán trong các tệp 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 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 được 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à chúng tôi sẽ đề cập trong bài viết này.

`

This string uses backticks.

`

;

 

Sao chép

Cách dễ nhất để xem đầu ra của một chuỗi là in nó ra bảng điều khiển, với console.log():

console

.

log

(

"This is a string in the console."

)

;

 

Sao chép


 

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."

)

;

 

Sao chép

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

Đầu ra chuỗi cảnh báo JavaScript

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

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

Biến trong JavaScript được đặt tên container lưu trữ một giá trị, bằng cách sử dụng từ khóa varconsthoặ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."

;

 

Sao chép

Bây giờ newStringbiến chứa chuỗi của chúng ta, chúng ta có thể tham chiếu nó và in nó ra bảng điều khiển.

console

.

log

(

newString

)

;

 

Sao chép

Đ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 các 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.

Nối chuỗi

Nối có 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, 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.

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

"Sea"

+

"horse"

;

 

Sao chép


 

Output

Seahorse

Kết 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 chúng ta muốn có một khoảng trắng giữa các từ Seavà 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"

;

 

Sao chép


 

Output

Sea horse

Chúng tôi nối các chuỗi và các 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

+

"."

;

 

Sao chép


 

Output

My favorite poem is The Wide Ocean by Pablo Neruda.

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

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, 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

}

.

`

;

 

Sao chép


 

Output

My favorite poem is The Wide Ocean by Pablo Neruda.

Như chúng 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 chúng tôi 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ỳ câu trích dẫn nào.

"Beyond the Sea"

;

 

Sao chép


 

Output

Beyond the Sea

 

Sao chép

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 mã nguồn, bao gồm cả các câu trích dẫn. Một chuỗi giá trị là những gì chúng ta thấy trong đầu ra, và không bao gồm những trích dẫn.

Trong ví dụ trên, "Beyond the Sea"là một chuỗi ký tự và Beyond the Sealà 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 một chuỗi được trích dẫn đơn 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ã.

Chúng ta có thể thấy điều này bằng cách cố gắng sử dụng dấu nháy đơn trong sự I'mco lại bên dưới:

const

brokenString

=

'I'

m a broken string'

;

console

.

log

(

brokenString

)

;

 

Sao chép


 

Output

unknown

:

Unexpected

token

(

1

:

24

)

 

Sao chép

Đ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, 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

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ị 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."

 

Sao chép

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

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

;

 

Sao chép

Theo cách chúng tôi kết hợp dấu ngoặc kép và dấu ngoặc kép, chúng tôi 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 tôi. Tuy nhiên, khi chúng tôi đang làm việc để sử dụng cú pháp nhất quán trong các tệp 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 ( \)

Chúng ta có thể sử dụng \ký tự thoát 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 \'will 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, chúng ta có thể sử dụng dấu nháy đơn trong các chuỗi được xây dựng bằng ".

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

 

Sao chép

Chúng tôi cũng có thể sử dụng dấu ngoặc kép trong chuỗi được xây dựng với ".

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

;

 

Sao chép

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 định nghĩa 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 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à 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.

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

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

const

threeLines

=

"This is a string\nthat spans across\nthree lines."

;

 

Sao chép


 

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 chúng tôi 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."

;

 

Sao chép

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

const

threeLines

=

"This is a string\n\ that spans across\n\ three lines."

;

 

Sao chép

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 đó chúng ta có thể sử dụng các chuỗi ký tự mẫu. Đ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.

`

;

 

Sao chép


 

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.

Phần 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 ngoặc kép đơn và kép, tạo các ký tự mẫu, nối, thoát và gán giá trị chuỗi cho các biến.