Trong hướng dẫn này, bạn sẽ tìm hiểu về các Bản mẫu JavaScript (Chuỗi mẫu) với sự trợ giúp của các ví dụ.

Bạn đang xem : chuỗi ký tự mẫu trong javascript

Các ký tự mẫu (chuỗi mẫu) cho phép bạn sử dụng chuỗi hoặc biểu thức nhúng ở dạng chuỗi. Chúng được đặt trong dấu gạch ngược `` . Ví dụ:

 const name = 'Jack';
console.log (`Xin chào $ {name}!`); // Xin chào Jack!  

Lưu ý : Chữ mẫu được giới thiệu vào năm 2015 (còn được gọi là ECMAScript 6 hoặc ES6 hoặc ECMAScript 2015). Một số trình duyệt có thể không hỗ trợ việc sử dụng các ký tự mẫu. Truy cập Hỗ trợ văn bản của Mẫu JavaScript để tìm hiểu thêm.

Chữ mẫu cho chuỗi

Trong các phiên bản JavaScript trước, bạn sẽ sử dụng một dấu ngoặc kép '' hoặc một dấu ngoặc kép "" cho các chuỗi. Ví dụ:

 const str1 = 'Đây là một chuỗi';

// không thể sử dụng các dấu ngoặc kép giống nhau
const str2 = 'Một "dấu ngoặc kép" bên trong một chuỗi'; // mã hợp lệ
const str3 = 'Một' dấu ngoặc kép 'bên trong một chuỗi'; // Lỗi

const str4 = "Một 'trích dẫn' khác bên trong một chuỗi"; // mã hợp lệ
const str5 = "Một" dấu ngoặc kép khác "bên trong một chuỗi"; // Lỗi  

Để sử dụng các trích dẫn tương tự bên trong chuỗi, bạn có thể sử dụng ký tự thoát \ .

 // thoát các ký tự bằng cách sử dụng \
const str3 = 'A \' quote \ 'bên trong một chuỗi'; // mã hợp lệ
const str5 = "Một \" dấu ngoặc kép \ "bên trong một chuỗi"; // mã hợp lệ  

Thay vì sử dụng các ký tự thoát, bạn có thể sử dụng các ký tự mẫu. Ví dụ:

 const str1 = `Đây là một chuỗi`;
const str2 = `Đây là một chuỗi có 'dấu ngoặc kép' trong đó`;
const str3 = `Đây là một chuỗi có" dấu ngoặc kép "trong đó`;  

Như bạn có thể thấy, các ký tự của mẫu không chỉ giúp dễ dàng đưa vào các trích dẫn mà còn làm cho mã của chúng tôi trông gọn gàng hơn.

Xem Thêm  Chương trình Javascript để tạo một số ngẫu nhiên - số nguyên ngẫu nhiên js

Chuỗi nhiều dòng sử dụng chữ mẫu

Các ký tự mẫu cũng giúp bạn dễ dàng viết các chuỗi nhiều dòng. Ví dụ:

Sử dụng các ký tự mẫu, bạn có thể thay thế

 // sử dụng toán tử +
const message1 = 'Đây là một tin nhắn dài \ n' +
'kéo dài qua nhiều dòng \ n' +
'trong mã.'

console.log (message1)  

với

 const message1 = `Đây là một tin nhắn dài
trải dài trên nhiều dòng
trong mã. '

console.log (message1)  

Đầu ra của cả hai chương trình này sẽ giống nhau.

Đây là một tin nhắn dài
trải dài trên nhiều dòng
trong mã. 

Nội suy biểu thức

Trước JavaScript ES6, bạn sẽ sử dụng toán tử + để nối các biến và biểu thức trong một chuỗi. Ví dụ:

 const name = 'Jack';
console.log ('Xin chào' + tên); // Xin chào Jack  

Với các ký tự mẫu, việc đưa các biến và biểu thức vào trong một chuỗi sẽ dễ dàng hơn một chút. Để làm được điều đó, chúng tôi sử dụng cú pháp $ {...} .

 const name = 'Jack';
console.log (`Xin chào $ {name}`);

kết quả const = 4 + 5;

// các ký tự mẫu được sử dụng với các biểu thức
console.log (`Tổng của 4 + 5 là $ {result}`);

console.log (`$ {result & lt; 10? 'too low': 'Very high'} ')  

Đầu ra

Xin chào Jack
Tổng của 4 + 5 là 9
Quá thấp 

Quá trình gán các biến và biểu thức bên trong khuôn mẫu được gọi là phép nội suy.

Các mẫu được gắn thẻ

Thông thường, bạn sẽ sử dụng một hàm để chuyển các đối số. Ví dụ:

 thẻ chức năngVí dụ (chuỗi) {
    trả về chuỗi;
}

// truyền đối số
const result = tagExample ('Xin chào Jack');

console.log (kết quả);  

Tuy nhiên, bạn có thể tạo các mẫu được gắn thẻ (hoạt động giống như một hàm) bằng cách sử dụng các ký tự mẫu. Bạn sử dụng các thẻ cho phép bạn phân tích cú pháp các ký tự mẫu với một hàm.

Xem Thêm  jQuery Biểu mẫu gửi kèm theo ví dụ - jquery trên biểu mẫu gửi

Mẫu được gắn thẻ được viết giống như một định nghĩa hàm. Tuy nhiên, bạn không chuyển dấu ngoặc đơn () khi gọi nghĩa đen. Ví dụ:

 thẻ chức năngVí dụ (chuỗi) {
    trả về chuỗi;
}

// tạo mẫu được gắn thẻ
const result = tagExample`Hello Jack`;

console.log (kết quả);  

Đầu ra

["Xin chào Jack"] 

Một mảng các giá trị chuỗi được chuyển làm đối số đầu tiên của một hàm thẻ. Bạn cũng có thể chuyển các giá trị và biểu thức làm các đối số còn lại. Ví dụ:

 const name = 'Jack';
const chào = true;

thẻ hàmExample (string, nameValue) {
    let str0 = string [0]; // Xin chào
    let str1 = string [1]; // , Bạn có khỏe không?

    nếu (chào) {
        return `$ {str0} $ {nameValue} $ {str1}`;
    }
}

// tạo chữ được gắn thẻ
// truyền tên đối số
const result = tagExample`Xin chào $ {name}, Bạn có khỏe không? `;

console.log (kết quả);  

Đầu ra

Xin chào Jack, Bạn có khỏe không? 

Bằng cách này, bạn cũng có thể chuyển nhiều đối số trong temaplate được gắn thẻ.


Xem thêm những thông tin liên quan đến chủ đề chuỗi ký tự mẫu javascript

Tagged Template Literals

  • Tác giả: Steve Griffith – Prof3ssorSt3v3
  • Ngày đăng: 2020-07-13
  • Đánh giá: 4 ⭐ ( 2539 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Template literal strings are great for embedding (interpolating) variables and expressions inside JavaScript strings.
    They also include a feature called tagged template literals that let you create a function which will give you granular control over all the strings and expressions inside the template string.

    Code from video: https://gist.github.com/prof3ssorSt3v3/1f785db436aeb9ef19e04433994c64d2

    Array reduce method video: https://www.youtube.com/watch?v=6_XzV25rkcE

Chuỗi trong javascript

  • Tác giả: www.offjs.com
  • Đánh giá: 4 ⭐ ( 6752 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Class String được sử dụng để đại diện và thao tác một chuỗi các ký tự.

Chuỗi trong JavaScript

  • Tác giả: viblo.asia
  • Đánh giá: 5 ⭐ ( 6716 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 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 th…

Chuỗi (String) Trong JavaScript

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 4 ⭐ ( 6982 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Một chuỗi JavaScript bao gồm không hoặc nhiều ký tự được viết trong cặp dấu nháy.

JS Mẫu chuỗi

  • Tác giả: book-code.com.vn
  • Đánh giá: 5 ⭐ ( 1746 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Học HTML, Học CSS, Học Javascript, Học PHP, Học BOOTSTRAP, Học JQUERY. Tự học lập trình web, lập trình web cho người mới bắt đầu, học lập trình web online, học lập trình web online miễn phí, học code online, học lập trình cho người mới, học lập trình bắt đầu từ đâu. Học lập trình web online miễn phí 24/24, thành thạo các ngôn ngữ lập trình cơ bản trong thời gian ngắn, bookcode, codebook, book-code, code-book, code, book

[Tự học Javascript] String trong Javascript

  • Tác giả: cafedev.vn
  • Đánh giá: 3 ⭐ ( 9481 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong JavaScript, dữ liệu văn bản được lưu trữ dưới dạng chuỗi. Không có loại riêng cho một ký tự.

Chuỗi ký tự JavaScript mới?

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 8667 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Tôi vừa thử nghiệm một vài trình duyệt sử dụng đoạn mã JavaScript ngớ ngẩn này:…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  AngularJS là gì - góc js là gì

By ads_php