ECMAScript 6 đưa ra một loại chuỗi ký tự mới, sử dụng backtick làm dấu phân cách. Những chữ này cho phép các biểu thức nội suy chuỗi cơ bản được nhúng, sau đó được tự động phân tích và đánh giá.
let person = {name: 'RajiniKanth', age: 68, greeting: 'Thalaivaaaa!' };
let usualHtmlStr = "<p>My name is " + person.name + ",</p>\n" +
"<p>I am " + person.age + " old</p>\n" +
"<strong>\"" + person.greeting + "\" is what I usually say</strong>";
let newHtmlStr =
`<p>My name is ${person.name},</p>
<p>I am ${person.age} old</p>
<p>"${person.greeting}" is what I usually say</strong>`;
console.log(usualHtmlStr);
console.log(newHtmlStr);
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ự tốt đẹp của chuỗi ký tự 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);
// Now is the time for all good men
// to come to the aid of their
// country!
Biểu hiện nội suy
Bất kỳ biểu thức hợp lệ nào cũng được phép xuất hiện bên ${..}trong một chuỗi ký tự được nội suy, bao gồm các lệnh gọi hàm, các lệnh gọi biểu thức hàm nội tuyến và thậm chí các chuỗi ký tự được nội suy khác!
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);
// A very WARM welcome
// to all of you READERS!
Ở đây, `${who}s`chuỗi ký tự nội suy bên trong là một chút thuận tiện hơn cho chúng ta khi kết hợp whobiến với "s"chuỗi, trái ngược với who + "s". Ngoài ra, để ghi chú là một chuỗi ký tự được nội suy chỉ nằm trong phạm vi từ vựng, nơi nó xuất hiện, không được tự động trong phạm vi:
function foo(str) {
var name = "foo";
console.log(str);
}
function bar() {
var name = "bar";
foo(`Hello from ${name}!`);
}
var name = "global";
bar(); // "Hello from bar!"
Sử dụng mẫu bằng chữ cho HTML chắc chắn dễ đọc hơn bằng cách giảm bớt sự khó chịu.
Cách cũ đơn giản:
'<div class="' + className + '">' +
'<p>' + content + '</p>' +
'<a href="' + link + '">Let\'s go</a>'
'</div>';
Với ECMAScript 6:
`<div class="${className}">
<p>${content}</p>
<a href="${link}">Let's go</a>
</div>`
- Chuỗi của bạn có thể trải dài trên nhiều dòng.
- Bạn không phải thoát các ký tự trích dẫn.
- Bạn có thể tránh các nhóm như: '">'
- Bạn không phải sử dụng toán tử cộng.
Tagged Mẫu chữ
Chúng ta cũng có thể gắn thẻ một chuỗi mẫu, khi một chuỗi mẫu được gắn thẻ, các chữ và thay thế được truyền cho hàm trả về giá trị kết quả.
function myTaggedLiteral(strings) {
console.log(strings);
}
myTaggedLiteral`test`; //["test"]
function myTaggedLiteral(strings, value, value2) {
console.log(strings, value, value2);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
Chúng ta có thể sử dụng toán tử trải rộng ở đây để truyền nhiều giá trị. Đối số đầu tiên, chúng tôi gọi nó là chuỗi Chuỗi là một mảng gồm tất cả các chuỗi đơn giản (thứ nằm giữa bất kỳ biểu thức nội suy nào).
Sau đó chúng tôi thu thập tất cả đối số tiếp theo vào một mảng gọi là giá trị sử dụng ... gather/rest operator, mặc dù bạn có thể tất nhiên đã để lại cho họ như các thông số tên cá nhân sau khi chuỗi tham số như chúng tôi đã làm ở trên ( value1, value2, vv).
function myTaggedLiteral(strings, ...values) {
console.log(strings);
console.log(values);
}
let someText = 'Neat';
myTaggedLiteral`test ${someText} ${2 + 3}`;
//["test", ""]
// "Neat"
// 5
(Các) đối số được tập 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ự. Một chuỗi ký tự được gắn thẻ giống như một bước xử lý sau khi các phép nội suy được ước tính, 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 trong việc tạo chuỗi từ chữ. Hãy xem xét một ví dụ về việc tạo các mẫu có thể tái sử dụng.
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 là các chuỗi, đó là một mảng. Nhưng có thêm một chút dữ liệu bao gồm: các phiên bản chưa xử lý thô 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 cách sử dụng thuộc .rawtính, như thế này:
function showraw(strings, ...values) {
console.log(strings);
console.log(strings.raw);
}
showraw`Hello\nWorld`;
Như bạn có thể thấy, phiên bản thô của chuỗi bảo tồn chuỗi đã thoát \n, trong khi phiên bản được xử lý của chuỗi xử lý nó như một dòng mới thực sự không được giải mã. ECMAScript 6 đi kèm với chức năng tích hợp có thể được sử dụng làm thẻ chuỗi ký tự : String.raw(..). Nó chỉ đơn giản là đi qua các phiên bản thô của chuỗi:
console.log(`Hello\nWorld`);
/* "Hello
World" */
console.log(String.raw`Hello\nWorld`);
// "Hello\nWorld"