Trong bài viết này, bạn sẽ tìm hiểu ba cách khác nhau để tạo chuỗi nhiều dòng trong JavaScript.
Trước tiên, tôi sẽ giải thích những kiến thức cơ bản về chuỗi trong JavaScript và tìm hiểu cách sử dụng chữ mẫu. Sau đó, bạn sẽ tìm hiểu cách tạo một chuỗi kéo dài nhiều dòng với sự trợ giúp của các ví dụ mã trong quá trình thực hiện.
Đây là những gì chúng tôi sẽ đề cập:
- Chuỗi trong JavaScript là gì?
- một mẫu chữ là gì? Tại sao và làm thế nào để sử dụng chữ mẫu
- Cách tạo chuỗi nhiều dòng
- Cách tạo chuỗi nhiều dòng bằng chữ mẫu
- Cách tạo chuỗi nhiều dòng bằng cách sử dụng
+nhà điều hành - Cách tạo chuỗi nhiều dòng bằng cách sử dụng hoặc
\nhà điều hành
Chuỗi trong JavaScript là gì? Giới thiệu về cách tạo chuỗi trong JS
Chuỗi là một cách hiệu quả để giao tiếp thông qua văn bản.
Một chuỗi là một chuỗi các giá trị ký tự được sắp xếp theo thứ tự. Cụ thể, một chuỗi là một chuỗi gồm một hoặc nhiều ký tự có thể là chữ cái, số hoặc ký hiệu (chẳng hạn như dấu chấm câu).
Có ba cách bạn có thể tạo một chuỗi trong JavaScript:
- Bằng cách sử dụng dấu nháy đơn.
- Bằng cách sử dụng dấu ngoặc kép.
- Bằng cách sử dụng backticks.
Đây là cách tạo một chuỗi bằng cách sử dụng dấu nháy đơn:
// string created using single quotes ('')
let favePhrase="Hello World!";
Đây là cách tạo một chuỗi bằng cách sử dụng dấu ngoặc kép:
// string created using double quotes ("")
let favePhrase = "Hello World!";
Đây là cách tạo một chuỗi bằng cách sử dụng đánh dấu ngược:
// string created using backticks (``)
let favePhrase = `Hello World!`;
Cách cuối cùng để tạo chuỗi trong JavaScript được gọi là mẫu chữ.
Tôi đã tạo một biến có tên favePhrase.
Bên trong biến, tôi lưu trữ chuỗi Hello World!mà tôi đã tạo bằng ba cách khác nhau.
Để xem đầu ra của chuỗi trong bảng điều khiển của trình duyệt, hãy chuyển tên biến cho console.log();.
Ví dụ: Nếu tôi muốn xem đầu ra của chuỗi được tạo bằng dấu ngoặc kép, tôi sẽ làm như sau:
// string created using double quotes ("")
let favePhrase = "Hello World!";
// print string to the console
console.log(favePhrase);
// output
// Hello World!
Tạo chuỗi bằng cách sử dụng dấu ngoặc đơn hoặc dấu ngoặc kép hoạt động như nhau, vì vậy không có sự khác biệt giữa hai chuỗi.
Bạn có thể chọn sử dụng một trong hai hoặc cả hai trong toàn bộ tệp. Điều đó nói rằng, bạn nên duy trì tính nhất quán trong tệp của mình.
Khi tạo một chuỗi, hãy đảm bảo rằng loại dấu ngoặc kép bạn sử dụng ở cả hai bên đều giống nhau.
// Don't do this
let favePhrase="Hello World!";
console.log(favePhrase);
// output
// Uncaught SyntaxError: Invalid or unexpected token (at test.js:2:18)
Một điều khác cần lưu ý là bạn có thể sử dụng một loại trích dẫn bên trong một loại trích dẫn khác.
Ví dụ: bạn có thể sử dụng dấu ngoặc kép bên trong dấu ngoặc đơn, như sau:
let favePhrase = "My fave phrase is "Hello World"!';
Đảm bảo rằng các trích dẫn bên trong không khớp với các trích dẫn xung quanh vì làm như vậy sẽ dẫn đến lỗi:
// Don't do this
let favePhrase="My fave phrase is "Hello World'! ';
console.log(favePhrase)
// output
//Uncaught SyntaxError: Unexpected identifier (at test.js:2:38)
Điều tương tự cũng xảy ra khi bạn cố gắng sử dụng dấu nháy đơn bên trong dấu nháy đơn:
// Don't do this
let favePhrase="My fave phrase is "Hello world"! Isn"t it awesome?';
console.log(favePhrase);
// output
// Uncaught SyntaxError: Unexpected identifier (at test.js:3:56)
Tôi đã sử dụng dấu ngoặc đơn bên trong dấu ngoặc kép và điều đó đã hiệu quả. Tuy nhiên, khi tôi giới thiệu dấu nháy đơn, mã bị hỏng.
Cách để làm cho điều này hoạt động là thoát khỏi dấu ngoặc đơn bằng cách sử dụng \ nhân vật trốn thoát:
let favePhrase="My fave phrase is \"Hello World\'! ';
console.log(favePhrase);
// output
// My fave phrase is 'Hello World'!
Và để làm cho dấu nháy đơn hoạt động, bạn sẽ phải làm như sau:
let favePhrase="My fave phrase is "Hello world"! Isn\"t it awesome?';
console.log(favePhrase);
// output
// My fave phrase is "Hello world"! Isn't it awesome?
Mẫu chữ trong JavaScript là gì? Tại sao và cách sử dụng chữ mẫu trong JavaScript
Trước đó, bạn đã thấy rằng để tạo một mẫu theo nghĩa đen, bạn phải sử dụng backticks.
Mẫu chữ đã được giới thiệu với ES6 và chúng cho phép bạn thực hiện các thao tác phức tạp hơn bằng cách sử dụng chuỗi.
Một trong số đó là khả năng nhúng một biến nội tuyến bên trong một chuỗi, như vậy:
let firstName="John";
let lastName="Doe";
console.log(`Hi! My first name is ${firstName} and my last name is ${lastName}!`);
// output
//Hi! My first name is John and my last name is Doe!
Trong ví dụ trên, tôi đã tạo hai biến, firstName và lastNamevà lần lượt lưu trữ họ và tên của một người.
Sau đó, sử dụng console.log()tôi đã in một chuỗi được tạo bằng backticks, còn được gọi là mẫu chữ.
Bên trong chuỗi đó, tôi đã nhúng hai biến đó.
Để làm như vậy, tôi gói các tên biến trong ${} – đây còn được gọi là nội suy chuỗi cho phép bạn giới thiệu bất kỳ biến nào mà không cần phải nối chúng như vậy:
let firstName="John";
let lastName="Doe";
console.log("Hi! My first name is " + firstName + " and my last name is " + lastName + "!");
// output
// Hi! My first name is John and my last name is Doe!
Một điều khác mà các mẫu chữ cho phép bạn làm là sử dụng dấu ngoặc đơn, dấu ngoặc kép và dấu nháy đơn bên trong chúng mà không cần thoát khỏi chúng:
let favePhrase = `My fave phrase is "Hello World" ! Isn't it awesome?`
console.log(favePhrase);
// output
// My fave phrase is "Hello World" ! Isn't it awesome?
Các ký tự chuỗi cũng cho phép bạn tạo các chuỗi nhiều dòng, bạn sẽ học cách thực hiện trong phần sau.
Cách tạo chuỗi nhiều dòng trong JavaScript
Có ba cách để tạo chuỗi trải rộng trên nhiều dòng:
- Bằng cách sử dụng chữ mẫu.
- Bằng cách sử dụng
+toán tử – toán tử nối JavaScript. - Bằng cách sử dụng
\toán tử – toán tử dấu gạch chéo ngược JavaScript và ký tự thoát.
Nếu bạn chọn sử dụng dấu ngoặc đơn hoặc dấu ngoặc kép thay vì chữ mẫu để tạo chuỗi kéo dài nhiều dòng, bạn sẽ phải sử dụng + nhà điều hành hoặc \ nhà điều hành.
Cách tạo chuỗi nhiều dòng với chữ mẫu trong JavaScript
Chữ mẫu cho phép bạn tạo một chuỗi kéo dài nhiều dòng:
let learnCoding = `How to start learning web development?
- Learn HTML
- Learn CSS
- Learn JavaScript
Use freeCodeCamp to learn all the above and much, much more !
`
console.log(learnCoding);
// output
// How to start learning web development?
// - Learn HTML
// - Learn CSS
// - Learn JavaScript
// Use freeCodeCamp to learn all the above and much, much more !
Sử dụng mẫu chữ là cách đơn giản nhất để tạo chuỗi nhiều dòng.
Cách tạo chuỗi nhiều dòng bằng cách sử dụng + Toán tử Toán tử trong JavaScript
Lấy ví dụ tương tự từ phần trước, đây là cách bạn sẽ viết lại bằng cách sử dụng + nhà điều hành:
let learnCoding = 'How to start learning web development?' +
' - Learn HTML' +
' - Learn CSS' +
' - Learn JavaScript' +
' Use freeCodeCamp to learn all the above and much, much more!'
console.log(learnCoding);
// output
// How to start learning web development? - Learn HTML - Learn CSS - Learn JavaScript Use freeCodeCamp to learn all the above and much, much more!
Bạn cũng sẽ cần phải bao gồm các \n ký tự dòng mới để làm cho câu xuất hiện trên một dòng mới:
let learnCoding = 'How to start learning web development?\n' +
' - Learn HTML\n' +
' - Learn CSS\n' +
' - Learn JavaScript\n' +
' Use freeCodeCamp to learn all the above and much, much more!'
console.log(learnCoding);
// output
//How to start learning web development?
// - Learn HTML
// - Learn CSS
// - Learn JavaScript
// Use freeCodeCamp to learn all the above and much, much more!
Cách tạo chuỗi nhiều dòng bằng cách sử dụng \ Toán tử trong JavaScript
Nếu bạn muốn sử dụng \ toán tử, đây là cách bạn sẽ viết lại ví dụ từ phần trước:
let learnCoding = 'How to start learning web development? \n \
- Learn HTML \n \
- Learn CSS\n \
- Learn JavaScript \n \
Use freeCodeCamp to learn all the above and much, much more!'
console.log(learnCoding);
// output
// let learnCoding = 'How to start learning web development? \n \
// - Learn HTML \n \
// - Learn CSS\n \
// - Learn JavaScript \n \
//Use freeCodeCamp to learn all the above and much, much more!'
console.log(learnCoding);
Trong ví dụ này, tôi đã tạo một chuỗi nhiều dòng bằng dấu nháy đơn.
lần đầu tiên tôi phải sử dụng \n ký tự xuống dòng theo sau là \ toán tử để làm cho chuỗi trải rộng trên nhiều dòng.
Hãy chắc chắn rằng bạn đặt \ nhà điều hành sau khi \n ký tự xuống dòng.
Phần kết luận
Và bạn có nó rồi đấy! Bây giờ bạn đã biết cách tạo chuỗi nhiều dòng trong JavaScript.
Để tìm hiểu thêm về JavaScript, hãy xem Chứng nhận cấu trúc dữ liệu và thuật toán JavaScript của freeCodeCamp.
Đó là một chương trình giảng dạy miễn phí, được cân nhắc kỹ lưỡng và có cấu trúc, nơi bạn sẽ học một cách tương tác. Cuối cùng, bạn cũng sẽ xây dựng 5 dự án để nhận chứng chỉ và củng cố kiến thức của mình.
Cảm ơn vì đã đọc!
