Hướng dẫn what is string interpolation javascript? - javascript nội suy chuỗi là gì?

Nội suy chuỗi đang thay thế các trình giữ chỗ bằng các giá trị theo nghĩa đen của chuỗi.

Việc nội suy chuỗi trong JavaScript được thực hiện bởi các chữ cái mẫu (các chuỗi được bọc trong backticks

javascript
const message = "Hello, World";

2) và

javascript
const message = "Hello, World";

3 như một trình giữ chỗ. Ví dụ:

javascript
const number = 42;
const message = `The number is ${number}`;
message; // => 'The number is 42'

Hãy xem chi tiết hơn, với các ví dụ và thực tiễn tốt nhất, cách sử dụng chuỗi mẫu để thực hiện phép nội suy chuỗi trong JavaScript.

Mục lục

• 1. Chuỗi chữ
• 2. Người giữ chỗ
  • 2.1 Hiển thị chuyển đổi chuỗi
• 3. Thoát khỏi chỗ giữ chỗ
• 4. Thực tiễn tốt nhất
  • 4.1 Tái kết hợp chuỗi tái cấu trúc
  • 4.2 Biến người trợ giúp
  • 4.3 Trích dẫn đơn lẻ ở chỗ giữ chỗ
  • 4.4 Giải pháp thay thế
• 5. Nội suy chuỗi trong TypeScript
• 6. Nội suy chuỗi trong React
• 7. Kết luận

1. Chuỗi chữ

2. Người giữ chỗ

2.1 Hiển thị chuyển đổi chuỗi

javascript
const message = 'Hello, World!';

3. Thoát khỏi chỗ giữ chỗ

4. Thực tiễn tốt nhất

4.1 Tái kết hợp chuỗi tái cấu trúc

javascript
const message = `Hello, World!`;

4.2 Biến người trợ giúp

2. Người giữ chỗ

2.1 Hiển thị chuyển đổi chuỗi

3. Thoát khỏi chỗ giữ chỗ

• 4. Thực tiễn tốt nhất
• 4.1 Tái kết hợp chuỗi tái cấu trúc
• 4.2 Biến người trợ giúp

4.3 Trích dẫn đơn lẻ ở chỗ giữ chỗ

javascript
const greeting = 'Hello';
const who = 'World';
const message = `${greeting}, ${who}!`;
message; // => 'Hello, World!'

4.4 Giải pháp thay thế

5. Nội suy chuỗi trong TypeScript

6. Nội suy chuỗi trong React

javascript
const n1 = 2;
const n2 = 3;
const message1 = `The sum is ${n1 + n2}`;
message1; // => 'The sum is 5';
function sum(num1, num2) {
  return num1 + num2;
}
const message2 = `The sum is ${sum(n1, n2)}`;
message2; // => 'The sum is 5'

7. Kết luận

Trong JavaScript, có 3 cách để tạo ra các chuỗi chữ.

2.1 Hiển thị chuyển đổi chuỗi

3. Thoát khỏi chỗ giữ chỗ

4. Thực tiễn tốt nhất

javascript
const n = 3.5;
const message = `The number is ${n}`;
message; // => `The number is 3.5`

4.1 Tái kết hợp chuỗi tái cấu trúc

4.2 Biến người trợ giúp

4.3 Trích dẫn đơn lẻ ở chỗ giữ chỗ

javascript
const numbers = [1, 2, 3];
const message = `The numbers are ${numbers}`;
message; // => 'The numbers are 1,2,3'

4.4 Giải pháp thay thế

5. Nội suy chuỗi trong TypeScript

3. Thoát khỏi chỗ giữ chỗ

4. Thực tiễn tốt nhất

4.1 Tái kết hợp chuỗi tái cấu trúc

javascript
const message = `Some weird characters: ${abc}`;
// Throws "ReferenceError: abc is not defined"

4.2 Biến người trợ giúp

4.3 Trích dẫn đơn lẻ ở chỗ giữ chỗ

javascript
const message = `Some weird characters: \${abc}`;
message; // => 'Some weird characters follow: ${abc}'

4.4 Giải pháp thay thế

5. Nội suy chuỗi trong TypeScript

javascript
const message = 'Hello, World!';

0

4. Thực tiễn tốt nhất

4.1 Tái kết hợp chuỗi tái cấu trúc

4.2 Biến người trợ giúp

4.3 Trích dẫn đơn lẻ ở chỗ giữ chỗ

javascript
const message = 'Hello, World!';

1

4.4 Giải pháp thay thế

javascript
const message = 'Hello, World!';

2

5. Nội suy chuỗi trong TypeScript

4.2 Biến người trợ giúp

4.3 Trích dẫn đơn lẻ ở chỗ giữ chỗ

4.4 Giải pháp thay thế

javascript
const message = 'Hello, World!';

3

5. Nội suy chuỗi trong TypeScript

javascript
const message = 'Hello, World!';

4

Với việc giới thiệu các biến trợ giúp

javascript
const n = 3.5;
const message = `The number is ${n}`;
message; // => `The number is 3.5`

7,

javascript
const n = 3.5;
const message = `The number is ${n}`;
message; // => `The number is 3.5`

8 và

javascript
const n = 3.5;
const message = `The number is ${n}`;



message; // => `The number is 3.5`

9, chuỗi mẫu trở nên nhẹ hơn. Ngoài ra, mã tự do khi các biến trung gian được sử dụng.

4.3 Trích dẫn đơn lẻ ở chỗ giữ chỗ

Tôi đã đề xuất sử dụng các trích dẫn đơn

javascript
const message = "Hello, World";

4 thay vì backticks

javascript
const message = "Hello, World";

2 trong các biểu thức bên trong trình giữ chỗ.

Hãy sử dụng toán tử ternary. Khi người giữ chỗ sử dụng BackTicks

javascript
const message = "Hello, World";

2, thật khó để nắm bắt chuỗi mẫu vì có quá nhiều backticks trong chuỗi mẫu:

javascript
const message = 'Hello, World!';

5

Nhưng sử dụng các trích dẫn đơn bên trong trình giữ chỗ trông đẹp hơn:

javascript
const message = 'Hello, World!';

6

4.4 Giải pháp thay thế

Việc nội suy chuỗi là hữu ích trong nhiều tình huống. Nhưng khi chuỗi mẫu trở nên lớn, với các biểu thức giữ chỗ phức tạp, bạn có thể tìm kiếm các giải pháp khác.

Thành phần sau đây xây dựng lớp CSS dựa trên 2 biến:

javascript
const message = 'Hello, World!';

7

Mẫu theo nghĩa đen xác định tên lớp có 2 toán tử ternary và sự kết hợp của các chuỗi chữ. Bạn có thể thấy khó hiểu.

Một công cụ như ClassName có thể là lựa chọn tốt hơn chuỗi mẫu. Công cụ xây dựng tên lớp theo cách khai báo hơn.

Hãy tái cấu trúc thành phần để sử dụng

javascript
const numbers = [1, 2, 3];
const message = `The numbers are ${numbers}`;
message; // => 'The numbers are 1,2,3'

3:

javascript
const message = 'Hello, World!';

8

Phiên bản này của thành phần, sử dụng công cụ

javascript
const numbers = [1, 2, 3];
const message = `The numbers are ${numbers}`;
message; // => 'The numbers are 1,2,3'

3, dễ hiểu hơn phiên bản chuỗi mẫu.

Thêm nhiều lớp CSS (ví dụ: để xử lý

javascript
const numbers = [1, 2, 3];
const message = `The numbers are ${numbers}`;
message; // => 'The numbers are 1,2,3'

5) sẽ không làm giảm khả năng đọc của phiên bản sử dụng tiện ích

javascript
const numbers = [1, 2, 3];
const message = `The numbers are ${numbers}`;
message; // => 'The numbers are 1,2,3'

3 (trái với việc sử dụng một mẫu theo nghĩa đen).

5. Nội suy chuỗi trong TypeScript

Sự nội suy chuỗi trong TypeScript hoạt động giống như trong JavaScript:

javascript



const message = 'Hello, World!';

9

6. Nội suy chuỗi trong React

Nội suy chuỗi trong React bao gồm 2 trường hợp:

• Nội suy thuộc tính:

  javascript
  const numbers = [1, 2, 3];
  const message = `The numbers are ${numbers}`;
  message; // => 'The numbers are 1,2,3'
  

  7
• Nội suy văn bản của Element:

  javascript
  const numbers = [1, 2, 3];
  const message = `The numbers are ${numbers}`;
  message; // => 'The numbers are 1,2,3'
  

  8

Đây là một ví dụ cho thấy cả hai trường hợp:

javascript
const message = "Hello, World";

0

javascript
const numbers = [1, 2, 3];
const message = `The numbers are ${numbers}`;
message; // => 'The numbers are 1,2,3'

9 sẽ hiển thị đầu ra:

javascript
const message = "Hello, World";

1

Trong quá trình nội suy cả hai chuỗi thuộc tính và văn bản, các khoản giữ chỗ

javascript
const message = `Some weird characters: ${abc}`;
// Throws "ReferenceError: abc is not defined"

0 và tương ứng

javascript
const message = `Some weird characters: ${abc}`;
// Throws "ReferenceError: abc is not defined"

1 được thay thế bằng

javascript
const message = `Some weird characters: ${abc}`;
// Throws "ReferenceError: abc is not defined"

2.

7. Kết luận

Nội suy chuỗi là một tính năng tuyệt vời bởi vì nó giúp chèn các giá trị vào các chữ theo chữ một cách ngắn gọn và có thể đọc được. Và tránh cách tiếp cận nối dây vụng về.

Trong JavaScript, chuỗi mẫu thực hiện phép nội suy chuỗi.

Một chuỗi mẫu được xác định bằng cách gói một chuỗi các ký tự vào một cặp backticks

javascript
const message = `Some weird characters: ${abc}`;
// Throws "ReferenceError: abc is not defined"

3. Các trình giữ chỗ chuỗi mẫu có định dạng

javascript
const message = "Hello, World";

3, ví dụ

javascript
const message = `Some weird characters: ${abc}`;
// Throws "ReferenceError: abc is not defined"

5.

Đừng quá tạo quá trình theo nghĩa đen của chuỗi. Nếu chuỗi mẫu sử dụng các biểu thức phức tạp, hãy cố gắng giới thiệu các biến trung gian để lưu trữ các biểu thức trước khi đưa chúng vào trình giữ chỗ.

Ngay khi bạn cần một giá trị được chèn vào một chuỗi theo nghĩa đen, chuỗi mẫu là cách để đi.

Có nghĩa là gì bởi phép nội suy chuỗi?

Nội suy chuỗi trong ES6 là gì?

Tôi có thể sử dụng phép nội suy chuỗi JavaScript không?

Cú pháp để nội suy chuỗi là gì?