Nội suy chuỗi trong javascript

Chúng ta đều biết về cách khai báo chuỗi với dấu " hoặc ', và nếu các bạn chưa biết thì tôi cũng luôn nói rằng không phải khai báo cho chuỗi thông minh (một số ngôn ngữ gọi là vậy), nơi mà nội dung của nó

Từ ES6 ta có một kiểu chuỗi ký tự mới, sử dụng dấu ` (dấu ngược) để làm dấu phân cách. Định dạng chuỗi này cho phép nhúng các chuỗi biểu thức nội suy cơ bản vào, mà sẽ được tự động phân tích cú pháp và tính toán

Đây là trước khi có ES6

var name = "Kyle";
var greeting = "Hello " + name + "!";

console.log(greeting);            // "Hello Kyle!"
console.log(typeof greeting);     // "string"

Và đây là phong cách của ES6

var name = "Kyle";
var greeting = `Hello ${name}!`;

console.log(greeting);         // "Hello Kyle!"
console.log(typeof greeting);  // "string"

Như bạn có thể thấy, ta sử dụng dấu ` hai chuỗi ký tự đầu tiên được thông dịch thành chuỗi ký tự, còn các biểu thức bên trong

var text = 
`Now is the time for all good men
to come to the aid of their
country!`;

console.log(text);
// Now is the time for all 
// to come to the aid of their
// country!

Kết quả của công việc nội suy là một chuỗi thuần túy và được gán vào biến

var text = 
`Now is the time for all good men
to come to the aid of their
country!`;

console.log(text);
// Now is the time for all 
// to come to the aid of their
// country!

Một trong những lợi ích khác của chuỗi ký tự nội suy là cho phép chúng ta tách câu thành nhiều dòng

var text = 
`Now is the time for all good men
to come to the aid of their
country!`;

console.log(text);
// Now is the time for all 
// to come to the aid of their
// country!

Các ký tự xuống dòng được thêm vào sẽ được giữ nguyên trong giá trị của chuỗi như ta mong muốn

Bên trong

var text = 
`Now is the time for all good men
to come to the aid of their
country!`;

console.log(text);
// Now is the time for all 
// to come to the aid of their
// country!

Như một lời cảnh báo, bạn phải cẩn thận về khả năng đọc hiểu trong mã của chính mình với các tính năng mới. Cũng giống như việc sử dụng giá trị mặc định và phá hủy như đã nói ở bài trước, bạn có thể sử dụng không có nghĩa là bạn nên sử dụng. Đừng bao giờ đi quá đà với các thủ thuật mới từ ES6

Xem xét

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!

Sẽ có những trường hợp mà lồng chuỗi ký tự nội suy trở nên có ích, nhưng nói chung thì hãy cẩn thận khi sử dụng

Đây là một trong những thủ thuật khá hay ho trong ES6. Nó có vẻ hơi lạ nhưng nếu ta dành cho nó một chút thời gian thì sẽ có thể có những điều bất ngờ đó

function foo(strings, ...values) {
    console.log(strings);
    console.log(values);
}
var desc = "awesome";

foo`Everything is ${desc}!`;
// [ "Everything is ", "!" ]
// [ "awesome" ]

Hãy xem có chuyện gì xảy ra với đoạn mã trên. Đầu tiên, cái giai đoạn rối nhất có thể hiện ngay đó là

Có thể bạn chưa bao giờ thấy một cú pháp như vậy từ trước đến giờ. Vậy nó là cái gì?

Về cơ bản thì đây là một kiểu gọi hàm mà không cần phải trích dẫn. Trong đó tag section - hay section

var text = 
`Now is the time for all good men
to come to the aid of their
country!`;

console.log(text);
// Now is the time for all 
// to come to the aid of their
// country!

function bar() {
    return function foo(strings, ...values) {
        console.log(strings);
        console.log(values);
    }
}

var desc = "awesome";

bar()`Everything is ${desc}!`;
// [ "Everythings is ", "!" ]
// [ "awesome" ]

Ô kê như vậy cuối cùng thì cái gì được truyền vào hàm

var text = 
`Now is the time for all good men
to come to the aid of their
country!`;

console.log(text);
// Now is the time for all 
// to come to the aid of their
// country!

Đối số đầu tiên, mà ta gọi là

var text = 
`Now is the time for all good men
to come to the aid of their
country!`;

console.log(text);
// Now is the time for all 
// to come to the aid of their
// country!

var text = 
`Now is the time for all good men
to come to the aid of their
country!`;

console.log(text);
// Now is the time for all 
// to come to the aid of their
// country!

Để thuận tiện, ta gom hết tất cả các đối số tiếp theo vào trong một mảng được gọi là

var text = 
`Now is the time for all good men
to come to the aid of their
country!`;

console.log(text);
// Now is the time for all 
// to come to the aid of their
// country!

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!

var text = 
`Now is the time for all good men
to come to the aid of their
country!`;

console.log(text);
// Now is the time for all 
// to come to the aid of their
// country!

Các đối số được gom vào mảng

var text = 
`Now is the time for all good men
to come to the aid of their
country!`;

console.log(text);
// Now is the time for all 
// to come to the aid of their
// country!

var text = 
`Now is the time for all good men
to come to the aid of their
country!`;

console.log(text);
// Now is the time for all 
// to come to the aid of their
// country!

Bạn có thể định hình giá trị của

var text = 
`Now is the time for all good men
to come to the aid of their
country!`;

console.log(text);
// Now is the time for all 
// to come to the aid of their
// country!

var text = 
`Now is the time for all good men
to come to the aid of their
country!`;

console.log(text);
// Now is the time for all 
// to come to the aid of their
// country!

Một chuỗi ký tự được gắn thẻ giống như một bước xử lý sau khi nội suy xảy ra và trước khi chuỗi cuối cùng được sinh ra, cho phép ta có nhiều khả năng xử lý hơn trong quá trình tạo chuỗi

Thông thường, hàm tag chuỗi ký tự (giống cái hàm

var text = 
`Now is the time for all good men
to come to the aid of their
country!`;

console.log(text);
// Now is the time for all 
// to come to the aid of their
// country!

function tag(strings, ...values) {
    return strings.reduce(function(s, v, idx) {
        return s + (idx > 0 ? values[idx - 1] : "") + v;
    }, "");
}

var desc = "awesome";
var text = tag`Everything is ${desc}!`;
console.log(text); // Everything is awesome!

Trong đoạn trên,

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!

Vì vậy, thực tế thì chúng ta sử dụng như thế nào? . Nhưng bạn có thể tham khảo một ví dụ đơn giản khi định dạng một số theo đô la Mỹ

function dollabillsyall(strings, ...values) {
    return strings.reduce(function(s, v, idx) {
        if (idx > 0) {
            if (typeof values[idx - 1] == "number") {
                // look, also using interpolated
                // string literals!
                s += `$${values[idx - 1].toFixed(2)}`;
            } else {
                s += values[idx - 1];
            }
        }
        return s + v;
    }, "" );
}

var amt1 = 11.99,
         amt2 = amt1 * 1.08,
         name = "Kyle";
         
var text = dollabillsyall
`Thanks for your purchase, ${name}! Your
product cose was ${amt1}, which with tax
comes out to ${amt2}.`

console.log(text);
// Thanks for your purchase, Kyle! Your
// product cose was $11.99, which with tax
// comes out to $12.95

Nếu gặp một giá trị số trong mảng, ta thêm dấu "$" đằng sau nó và định dạng cho hai chữ số thập phân với hàm

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!

chuỗi thô

Trong đoạn mã trước, hàm

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!

var text = 
`Now is the time for all good men
to come to the aid of their
country!`;

console.log(text);
// Now is the time for all 
// to come to the aid of their
// country!

function showraw(strings, ...values) {
    console.log(strings);
    console.log(strings.raw);
}

showraw`Hello\nWorld`;
// [ "Hello↵World" ]
// [ "Hello\nWorld" ]

ES6 cũng mang đến một chức năng tích hợp sẵn có thể được sử dụng như một thẻ ký tự chuỗi ký tự.

function foo(strings, ...values) {
    console.log(strings);
    console.log(values);
}
var desc = "awesome";

foo`Everything is ${desc}!`;
// [ "Everything is ", "!" ]
// [ "awesome" ]

var text = 
`Now is the time for all good men
to come to the aid of their
country!`;

console.log(text);
// Now is the time for all 
// to come to the aid of their
// country!

var name = "Kyle";
var greeting = `Hello ${name}!`;

console.log(greeting);         // "Hello Kyle!"
console.log(typeof greeting);  // "string"

Ngoài ra, việc sử dụng thẻ ký tự chuỗi còn bao gồm một số xử lý đặc biệt cho quốc tế hóa, bản địa hóa,

Trên đây là một số kiến ​​thức hữu ích có thể bạn chưa biết với Nội suy chuỗi ký tự của JavaScript. Hy vọng bài viết sẽ là nguồn tham khảo tốt cho các bạn