Chuỗi nối góc trong html

Dưới đây là 4 cách kết hợp chuỗi trong JavaScript. Cách yêu thích của tôi là sử dụng Chuỗi mẫu. Tại sao?

const icon = '👋';

// Template Strings
`hi ${icon}`;

// join[] Method
['hi', icon].join[' '];

// Concat[] Method
''.concat['hi ', icon];

// + Operator
'hi ' + icon;

// RESULT
// hi 👋

1. Chuỗi mẫu

Nếu bạn đến từ một ngôn ngữ khác, chẳng hạn như Ruby, bạn sẽ quen thuộc với thuật ngữ nội suy chuỗi. Đó chính xác là những gì chuỗi mẫu đang cố gắng đạt được. Đó là một cách đơn giản để bao gồm các biểu thức trong quá trình tạo chuỗi của bạn, dễ đọc và ngắn gọn

const name = 'samantha';
const country = '🇨🇦';

Vấn đề thiếu không gian trong chuỗi nối

Trước chuỗi mẫu, đây sẽ là kết quả của chuỗi của tôi 😫

"Hi, I'm " + name + "and I'm from " + country;

☝️ Anh có bắt lỗi em không? . Và đó là một vấn đề siêu phổ biến khi nối các chuỗi

// Hi, I'm samanthaand I'm from 🇨🇦

Đã giải quyết bằng Chuỗi mẫu

Với các chuỗi mẫu, điều này đã được giải quyết. Bạn viết chính xác cách bạn muốn chuỗi của mình xuất hiện. Vì vậy, rất dễ dàng để phát hiện nếu một khoảng trống bị thiếu. Siêu dễ đọc bây giờ, yay. 👏

`Hi, I'm ${name} and I'm from ${country}`;

2. tham gia[]

Phương thức

const name = 'samantha';
const country = '🇨🇦';

9 kết hợp các phần tử của một mảng và trả về một chuỗi. Vì nó hoạt động với mảng nên rất tiện nếu bạn muốn thêm các chuỗi bổ sung

const instagram = '@samanthaming';
const twitter = '@samantha_ming';
const array = ['My handles are ', instagram, twitter];

const tiktok = '@samantaming';

array.push[tiktok];

array.join[' '];

// My handles are @samanthaming @samantha_ming @samanthaming

Tùy chỉnh dấu tách

Điều tuyệt vời về

const name = 'samantha';
const country = '🇨🇦';

9 là bạn có thể tùy chỉnh cách kết hợp các phần tử mảng của mình. Bạn có thể làm điều này bằng cách chuyển một dấu phân cách trong tham số của nó

________số 8

3. concat[]

Với

"Hi, I'm " + name + "and I'm from " + country;

1, bạn có thể tạo một chuỗi mới bằng cách gọi phương thức trên một chuỗi

const name = 'samantha';
const country = '🇨🇦';

0

Kết hợp chuỗi với mảng

Bạn cũng có thể sử dụng

"Hi, I'm " + name + "and I'm from " + country;

1 để kết hợp một chuỗi với một mảng. Khi tôi truyền một đối số mảng, nó sẽ tự động chuyển đổi các mục của mảng thành một chuỗi được phân tách bằng dấu phẩy

"Hi, I'm " + name + "and I'm from " + country;

3

const name = 'samantha';
const country = '🇨🇦';

3

Nếu bạn muốn nó được định dạng tốt hơn, chúng tôi có thể sử dụng

const name = 'samantha';
const country = '🇨🇦';

9 để tùy chỉnh dấu phân cách của mình

const name = 'samantha';
const country = '🇨🇦';

5

4. Toán tử cộng [+]

Một điều thú vị về việc sử dụng toán tử

"Hi, I'm " + name + "and I'm from " + country;

5 khi kết hợp các chuỗi. Bạn có thể sử dụng để tạo một chuỗi mới hoặc bạn có thể thay đổi một chuỗi hiện có bằng cách thêm vào chuỗi đó

không đột biến

Ở đây chúng tôi đang sử dụng

"Hi, I'm " + name + "and I'm from " + country;

5 để tạo một chuỗi hoàn toàn mới

const name = 'samantha';
const country = '🇨🇦';

0

đột biến

Chúng tôi cũng có thể nối nó vào một chuỗi hiện có bằng cách sử dụng

"Hi, I'm " + name + "and I'm from " + country;

7. Vì vậy, nếu vì lý do nào đó, bạn cần một cách tiếp cận đột biến, thì đây có thể là một lựa chọn dành cho bạn

const name = 'samantha';
const country = '🇨🇦';

1

Ôi chết tiệt 😱 Lại quên chỗ. HIỂU. Rất dễ bỏ sót khoảng trắng khi nối các chuỗi

const name = 'samantha';
const country = '🇨🇦';

2

Điều đó vẫn cảm thấy rất lộn xộn, hãy ném

const name = 'samantha';
const country = '🇨🇦';

9 vào đó

const name = 'samantha';
const country = '🇨🇦';

3

Thoát ký tự trong chuỗi

Khi bạn có các ký tự đặc biệt trong chuỗi của mình, trước tiên bạn cần thoát các ký tự này khi kết hợp. Hãy xem qua một vài tình huống và xem làm thế nào chúng ta có thể thoát khỏi chúng 💪

Thoát dấu nháy đơn hoặc dấu nháy đơn [']

Khi tạo chuỗi, bạn có thể sử dụng dấu ngoặc đơn hoặc dấu ngoặc kép. Nắm được kiến ​​thức này, khi bạn có một trích dẫn trong chuỗi của mình, một giải pháp rất đơn giản là sử dụng dấu ngoặc kép để tạo chuỗi

const name = 'samantha';
const country = '🇨🇦';

4

Tất nhiên, bạn cũng có thể sử dụng dấu gạch chéo ngược,

"Hi, I'm " + name + "and I'm from " + country;

9 , để thoát các ký tự. Nhưng mình thấy hơi khó đọc nên không hay làm theo cách này

const name = 'samantha';
const country = '🇨🇦';

5

Vì Chuỗi mẫu đang sử dụng backtick nên trường hợp này không áp dụng cho nó 👍

Thoát dấu ngoặc kép ["]

Tương tự như thoát dấu ngoặc đơn, chúng ta có thể sử dụng cùng một kỹ thuật sử dụng ngược lại. Vì vậy, để thoát dấu ngoặc kép, chúng tôi sẽ sử dụng dấu ngoặc đơn

const name = 'samantha';
const country = '🇨🇦';

6

Và vâng, cũng có thể sử dụng ký tự thoát dấu gạch chéo ngược

const name = 'samantha';
const country = '🇨🇦';

6

Vì Chuỗi mẫu đang sử dụng backtick nên trường hợp này không áp dụng cho nó 👍

Thoát backtick [`]

Vì Chuỗi mẫu đang sử dụng backticks để tạo chuỗi của nó nên khi muốn xuất ký tự đó, chúng ta phải thoát nó bằng dấu gạch chéo ngược

const name = 'samantha';
const country = '🇨🇦';

8

Vì các tạo chuỗi khác không sử dụng backtick nên trường hợp này không áp dụng cho chúng 👍

Cách nào để sử dụng?

Tôi đã trình bày một số ví dụ về cách sử dụng các cách nối chuỗi khác nhau. Cách nào tốt hơn tất cả phụ thuộc vào tình hình. Khi nói đến sở thích về phong cách, tôi thích làm theo hướng dẫn về Phong cách của Airbnb

Khi xây dựng chuỗi theo chương trình, hãy sử dụng chuỗi mẫu thay vì nối. dây dẫn. ưu tiên mẫu mẫu-xoăn-khoảng cách

Vì vậy, chuỗi mẫu cho chiến thắng. 👑

Tại sao những cách khác vẫn quan trọng?

Điều quan trọng là phải biết những cách khác. Tại sao? . Là một nhà phát triển, chúng ta cần có khả năng thích ứng và hiểu bất kỳ môi trường nào mà chúng ta bị ném vào. Chúng tôi ở đó để giải quyết vấn đề chứ không phải phàn nàn về độ cũ của công nghệ lol 😂 Trừ khi lời phàn nàn đó được kết hợp với hành động hữu hình để cải thiện. Sau đó, chúng tôi đã có tiến bộ 👏

Làm cách nào để nối chuỗi trong HTML trong Angular?

Làm cách nào để nối chuỗi trong HTML?

Bạn có thể sử dụng += để nối các chuỗi không?

Làm cách nào để nối chuỗi và số trong TypeScript?