ES6đưa ra một loại chuỗi ký tự mới, sử dụng `dấu tích lùi làm dấu phân cách. Các ký tự này cho phép nhúng các biểu thức nội suy chuỗi cơ bản, sau đó được tự động phân tích cú pháp và đánh giá.
let actor = {name: 'RajiniKanth', age: 68};
let oldWayStr = "<p>My name is " + actor.name + ",</p>\n" +
"<p>I am " + actor.age + " old</p>\n";
let newWayHtmlStr =
`<p>My name is ${actor.name},</p>
<p>I am ${actor.age} old</p>`;
console.log(oldWayStr);
console.log(newWayHtmlStr);
Như bạn có thể thấy, chúng tôi đã sử dụng .. '' xung quanh một loạt các ký tự, được hiểu là một chuỗi ký tự, nhưng bất kỳ biểu thức nào của biểu mẫu ${..}đều được phân tích cú pháp và đánh giá nội tuyến ngay lập tức.
Một lợi ích thực sự tuyệt vời của các ký tự chuỗi nội suy là chúng được phép chia thành nhiều dòng:
var Actor = {"name" : "RajiniKanth"};
var text =
`Now is the time for all good men like ${Actor.name}
to come to the aid of their
country!`;
console.log( text );
Biểu thức nội suy
Bất kỳ biểu thức hợp lệ nào đều được phép xuất hiện bên trong ${..}trong một chuỗi nội suy lit‐ eral, bao gồm các lệnh gọi hàm, lệnh gọi biểu thức hàm nội tuyến, và thậm chí cả các lệnh khác interpo‐ lated string literals!
function upper(s) {
return s.toUpperCase();
}
var who = "reader"
var text =
`A very ${upper( "warm" )} welcome
to all of you ${upper( `${who}s` )}!`;
console.log( text );
Ở đây, nghĩa đen của chuỗi nội suy $ {who} s`` có một chút tiện lợi hơn cho chúng ta khi kết hợp biến who với "s"chuỗi, trái ngược với who + "s". Ngoài ra, để giữ một ghi chú là một chuỗi nội suy, nghĩa đen chỉ lexically scopedở nơi nó xuất hiện, không dynamically scopedtheo bất kỳ cách nào
function foo(str) {
var name = "foo";
console.log( str );
}
function bar() {
var name = "bar";
foo( `Hello from ${name}!` );
}
var name = "global";
bar();
Sử dụng template literalcho HTML chắc chắn dễ đọc hơn bằng cách giảm bớt sự phiền toái.
Cách cũ đơn giản:
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
'</div>';
Với ES6:
`<div class="${className}">
<p>${content}</p>
<a href="${link}">Let's go</a>
</div>`
- Chuỗi của bạn có thể kéo dài nhiều dòng.
- Bạn không cần phải thoát khỏi các ký tự trích dẫn.
- Bạn có thể tránh các nhóm như: '">'
- Bạn không cần phải sử dụng toán tử dấu cộng.
Chữ viết mẫu được gắn thẻ
Chúng ta cũng có thể gắn thẻ một templatechuỗi, khi một templatechuỗi được gắn thẻ, các literalsthay thế và thay thế được chuyển đến hàm trả về giá trị kết quả.
function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`test`;
function myTaggedLiteral(strings,value,value2) {
console.log(strings,value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
Chúng ta có thể sử dụng spreadtoán tử ở đây để chuyển nhiều giá trị. Đối số đầu tiên - chúng tôi gọi là chuỗi - là một mảng của tất cả các chuỗi thuần túy (thứ nằm giữa bất kỳ biểu thức nội suy nào).
sau đó chúng tôi tập hợp tất cả các đối số tiếp theo vào một mảng được gọi là giá trị bằng cách sử dụng ... gather/rest operator, mặc dù tất nhiên bạn có thể để chúng dưới dạng các tham số được đặt tên riêng lẻ theo sau tham số chuỗi như chúng tôi đã làm ở trên (value1, value2 etc).
function myTaggedLiteral(strings,...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
Tập argument(s)hợp vào mảng giá trị của chúng tôi là kết quả của các biểu thức nội suy đã được đánh giá được tìm thấy trong chuỗi ký tự. A tagged string literalgiống như một bước xử lý sau khi các nội suy được đánh giá nhưng trước khi giá trị chuỗi cuối cùng được biên dịch, cho phép bạn kiểm soát nhiều hơn việc tạo chuỗi từ ký tự. Hãy xem một ví dụ về việc tạo một re-usable templates.
const Actor = {
name: "RajiniKanth",
store: "Landmark"
}
const ActorTemplate = templater`<article>
<h3>${'name'} is a Actor</h3>
<p>You can find his movies at ${'store'}.</p>
</article>`;
function templater(strings, ...keys) {
return function(data) {
let temp = strings.slice();
keys.forEach((key, i) => {
temp[i] = temp[i] + data[key];
});
return temp.join('');
}
};
const myTemplate = ActorTemplate(Actor);
console.log(myTemplate);
Chuỗi thô
các hàm thẻ của chúng tôi nhận được một đối số đầu tiên mà chúng tôi đã gọi strings, đó là một array. Nhưng có một chút dữ liệu bổ sung được bao gồm: các phiên bản thô chưa được xử lý của tất cả các chuỗi. Bạn có thể truy cập các giá trị chuỗi thô đó bằng thuộc .rawtính, như sau:
function showraw(strings, ...values) {
console.log( strings );
console.log( strings.raw );
}
showraw`Hello\nWorld`;
Như bạn có thể thấy, rawphiên bản của chuỗi giữ nguyên chuỗi \ n thoát, trong khi phiên bản đã xử lý của chuỗi xử lý nó giống như một dòng mới thực không thoát. ES6đi kèm với một built-in chức năng có thể được sử dụng như là một chuỗi thẻ chữ: String.raw(..). Nó chỉ đơn giản là đi qua các phiên bản thô của strings:
console.log( `Hello\nWorld` );
console.log( String.raw`Hello\nWorld` );