- vừa được xem lúc

5. Sử dụng Template literal

0 0 17

Người đăng: Gấu con

Theo Viblo Asia

Trong bài viết này mình sẽ chia sẻ cách sử dụng template literal trong Javascript, cái cho phép bạn làm việc với strings dễ dàng hơn.
Trước đây bạn phải sử dụng 1 cặp dấu nháy đơn ( ' ) hoặc dấu nháy kép ( " ) để bao quanh một string(chuỗi ký tự). Khi đó strings của chúng ta bị giới hạn nhiều chức năng.
Để giải quyết các vấn đề phức tạp hơn trong strings, ES6 cung cấp một cú pháp giúp chúng ta làm việc với strings một cách dễ dàng hơn.
Trong ES6 bạn có thể tạo một template literal bởi cặp dấu nháy ngược ( ` ) như bên dưới.

let simple = `This is a template literal`;

Cú pháp sử dụng trong Template Literal

Thay vì sử dụng dấu ( ' ) hoặc ( " ) để bao quanh một strings thì bạn có thể sử dụng cặp dấu nháy ngược( ` ) để bao quanh một string.

let str = `Template literal in ES6`; console.log(str);// Template literal in ES6
console.log(str.length); // 23
console.log(typeof str);// string

Bạn có thể sử dụng thoải mái dấu ( ' ) hoặc ( " ) trong template literal.

let anotherStr = `Here's a template literal`;

Nếu string có chứa dấu nháy ngược ( ` ) thì bạn phải thêm ký tự \ trước dấu nháy ngược đó để sử dụng.

let strWithBacktick = `Template literals use backticks \` insead of quotes`;

Sử dụng multiline trong strings

Trước đây để xuống dòng trong một chuỗi thì bạn phải thêm ký tự xuống ( \n ) như bên dưới.

let msg = 'Multiline \n\
string'; console.log(msg);
//Multiline
//string

Tuy nhiên với cách này có thể sẽ không hoạt động tốt trên các công cụ javascript.
Template literals cho phép bạn tạo nhiều dòng trong một string một cách dễ dàng như bên dưới.

let p =
`This text
can
span multiple lines`;

Sử dụng variable trong strings

Để sử dụng một variable trong string bạn hãy đặt biến đó trong khối ${ } như bên dưới nhé

${variable_name}

Ví dụ:

let firstName = 'John', lastName = 'Doe'; let greeting = `Hi ${firstName}, ${lastName}`;
console.log(greeting); // Hi John, Doe
let price = 8.99, tax = 0.1; let netPrice = `Net Price:$${(price * (1 + tax)).toFixed(2)}`; console.log(netPrice); // netPrice:$9.89

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 496

- vừa được xem lúc

Type annotation vs Type Inference - Typescript

Trong bài viết này, chúng ta sẽ tìm hiểu kỹ về TypeScript bằng cách tìm hiểu sự khác biệt giữa kiểu chú thích và kiểu suy luận. Tôi sẽ cho rằng bạn có một số kinh nghiệm về JavaScript và biết về các kiểu cơ bản, như chuỗi, số và boolean.

0 0 31

- vừa được xem lúc

Type Annotation và Type Inference trong TypeScript là gì?

Khi làm việc với javascript chắc hẳn các bạn đã quá quen với việc dùng biến mà không cần phải quan tâm đến kiểu dữ liệu của nó là gì phải không? Đúng là mới đầu tiếp cận với Typescript mình cũng cảm thấy nó khá là phiền vì cần phải khai báo đủ type để nó chặt chẽ hơn. Lúc đó mình còn nghĩ: " JavaScr

0 0 24

- vừa được xem lúc

Tìm hiểu TypeScript và kiến thức cơ bản

TypeScript là gì. TypeScript sử dụng tất cả các tính năng của của ECMAScript 2015 (ES6) như classes, modules.

0 0 33

- vừa được xem lúc

TypeScript - P1: Vì sao TypeScript được yêu thích đến vậy?

Trải nghiệm thực tế. Trước khi là một Web Developer, tôi là một Mobile Developer và Java là thứ mà tôi từng theo đuổi.

0 1 57

- vừa được xem lúc

4 Tính năng rất hay từ TypeScript

Xin chào các bạn hôm nay mình xin chia sẽ những tính năng rất hay của TypeScript (TS), các bạn cùng tìm hiểu nhé. Ngoài việc set Type cho biến, tham số hay function thì ví dụ khi bạn nhìn vào một tham

0 0 81