Hướng dẫn why backtick is used in javascript? - tại sao backtick được sử dụng trong javascript?

Ecmascript 6 đưa ra một loại chuỗi mới, sử dụng backtick làm dấu phân cách. Những chữ cái 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 cú pháp và đánh giá.

let person = {name: 'RajiniKanth', age: 68, greeting: 'Thalaivaaaa!' };

let usualHtmlStr = "
My name is " + person.name + ",
\n" +
  "
I am " + person.age + " old
\n" +
  "\"" + person.greeting + "\" is what I usually say";

let newHtmlStr =
 `
My name is ${person.name},
  
I am ${person.age} old
  
"${person.greeting}" is what I usually say`;

console.log(usualHtmlStr);
console.log(newHtmlStr);

Như bạn có thể thấy, chúng tôi đã sử 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 like RajiniKanth
// to come to the aid of their
// country!

1 xung quanh một loạt các ký tự, được hiểu là một chuỗi theo nghĩa đen, nhưng bất kỳ biểu thức nào có 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 like RajiniKanth
// to come to the aid of their
// country!

2 đề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 các chữ cái được nội suy là chúng được phép phân chia trên 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 like RajiniKanth
// to come to the aid of their
// country!

Biểu thức 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

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 like RajiniKanth
// to come to the aid of their
// country!

2 trong một chuỗi nội suy theo nghĩa đen, bao gồm các cuộc gọi chức năng, các cuộc gọi biểu thức chức năng nội tuyến và thậm chí các chữ cái đượ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, chuỗi nội suy bên trong

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 like RajiniKanth
// to come to the aid of their
// country!

4 theo nghĩa đen là một chút thuận tiện đẹp hơn một chút đối với chúng tôi khi kết hợp các biến

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 like RajiniKanth
// to come to the aid of their
// country!

5 với chuỗi

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 like RajiniKanth
// to come to the aid of their
// country!

6, trái ngược với

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 like RajiniKanth
// to come to the aid of their
// country!

7. Ngoài ra, để giữ một ghi chú là một chuỗi nội suy theo nghĩa đen chỉ được phạm vi từ vựng ở nơi nó xuất hiện, không được sử dụng một cách tự động theo 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(); // "Hello from bar!"

Sử dụng mẫu theo nghĩa đen cho HTML chắc chắn dễ đọc hơn bằng cách giảm sự khó chịu.

Theo cách cũ đơn giản:

'
' +
  '
' + content + '
' +
  'Let\'s go'
'
';

Với Ecmascript 6:

`

  
${content}
  Let's go
`

• 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 phải sử dụng toán tử cộng.

Tagged Memlate Lingerals

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ữ cái và thay thế được truyền cho chức năng 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ử lây lan ở đây để vượt qua nhiều giá trị. Đối số đầu tiên mà chúng tôi gọi là chuỗi là một mảng của tất cả các chuỗi đơn giản (thứ giữa bất kỳ biểu thức được nội suy nào).

Sau đó, chúng tôi thu thập tất cả các đối số tiếp theo thành một mảng có tên là các giá trị bằng cách sử 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 like RajiniKanth
// to come to the aid of their
// country!

8, 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 tham số chuỗi như chúng tôi đã làm ở trên (

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 like RajiniKanth
// to come to the aid of their
// country!

9,

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!

0, v.v.).

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 thu thậ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 theo nghĩa đen. Một chuỗi được gắn thẻ theo nghĩa đen giống như một bước xử lý sau khi các phép 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 đối với việc tạo chuỗi từ nghĩa đen. 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`

  
${'name'} is a Actor
  
You can find his movies at ${'store'}.

`;

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);

Dây thô

Các chức năng 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à chuỗi, đó là một mảng. Nhưng có một chút dữ liệu bao gồm: các phiên bản 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 tính

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!

1, 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 RAW của chuỗi bảo tồn chuỗi

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!

2 đã thoát ra, trong khi phiên bản xử lý của chuỗi đối xử với nó giống như một dòng mới thực không được phân loại. Ecmascript & nbsp; 6 đi kèm với chức năng tích hợp có thể được sử dụng làm thẻ theo nghĩa đen:

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!

3. Nó chỉ đơn giản đi qua các phiên bản thô của chuỗi:

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 like RajiniKanth
// to come to the aid of their
// country!

0

Backtick được sử dụng để làm gì?

Khóa Backtick trong JavaScript là gì?

Backticks có chậm hơn các chuỗi khác trong JavaScript không?

$ {} Trong HTML là gì?