Nối chuỗi JavaScript ES6

Phương thức này thêm hai hoặc nhiều chuỗi và trả về một chuỗi đơn mới

cú pháp

string.concat(string2, string3[, ..., stringN]);

Chi tiết đối số

• chuỗi2. stringN − Đây là các chuỗi được nối

Giá trị trả về

Trả về một chuỗi nối đơn

Ví dụ

var str1 = new String( "This is string one" );
var str2 = new String( "This is string two" );
var str3 = str1.concat( str2 );
console.log("str1 + str2 : "+str3)

đầu ra

str1 + str2 : This is string oneThis is string two

Chúng ta sẽ nối hai chuỗi mà không sử dụng bất kỳ phương thức tích hợp JavaScript nào và ký hiệu +

Đối với thuật toán hôm nay, chúng ta sẽ viết một hàm có tên là joinStrings chấp nhận hai chuỗi, string1 và string2, làm đầu vào

Mục tiêu của hàm là nối hai chuỗi lại với nhau nhưng có một nhược điểm. Chúng ta sẽ nối hai chuỗi mà không sử dụng bất kỳ phương thức tích hợp JavaScript nào và không sử dụng dấu +

ES6 đã giới thiệu một cách nối chuỗi mới với Nội suy chuỗi. Bạn có thể chèn hoặc nội suy các biến vào chuỗi bằng cách sử dụng chữ mẫu. Một ví dụ về một mẫu chữ như sau

let myName = "Mud";
console.log(`My dog's name is ${myName}.`);
// outputs: My dog's name is Mud.

Cách mới này để nối một hoặc nhiều chuỗi dễ đọc và dễ viết hơn nhiều. Bây giờ chúng ta đã biết cách nối hai chuỗi mà không cần sử dụng các phương thức có sẵn ký hiệu +, chúng ta có thể viết ra hàm của mình

function joinStrings(string1, string2){
   return `${string1} ${string2}`;
}

Nếu bạn muốn biết thêm về nối chuỗi, bạn có thể xem một trong những bài viết cơ bản về JavaScript của tôi đề cập đến vấn đề này và hơn thế nữa

Nối chuỗi là quá trình nối một chuỗi với cuối một chuỗi khác, ví dụ nối “happy” và “holiday” thành “happy holiday”

Chữ mẫu là chữ được liên kết với dấu kiểm ngược (`) cho phép các biểu thức nhúng được gọi là thay thế. Chuỗi mẫu đôi khi được gọi một cách không chính thức là chuỗi mẫu, tuy nhiên chúng không phải là chuỗi ký tự và không thể được sử dụng ở mọi nơi có thể sử dụng chuỗi ký tự. Chữ mẫu cung cấp cho chúng tôi một giải pháp thay thế cho nối chuỗi. Chúng cũng cho phép chúng ta chèn các biến vào một chuỗi

điểm chính

• chuỗi nối là gì
• Mẫu chữ ES6 là gì
• Cách nối chuỗi trong React
• Cách sử dụng chữ mẫu trong React
• Sự khác biệt giữa chuỗi nối và chữ mẫu

Mẫu chữ ES6

Mẫu chữ đã được giới thiệu trong ECMAScript 2015/ES6 như một tính năng mới. Nó cung cấp một cách dễ dàng để tạo chuỗi nhiều dòng và thực hiện phép nội suy chuỗi

Tại sao tôi lại sử dụng phương pháp chữ mẫu mới này?

• Một trong số đó là nó yêu cầu ít ký tự hơn. Vì vậy, khoảng trống thừa mà bạn cần để sử dụng dấu cộng trước sẽ bổ sung thêm độ dài cho mã của bạn, khiến mã trông có vẻ cồng kềnh hơn
• Nó không còn cần phải thoát khỏi dấu ngoặc đơn hoặc dấu ngoặc kép. Vâng đúng vậy. Bạn không còn cần phải lùi dấu gạch chéo để đóng dấu ngoặc kép
• nó dễ đọc hơn nhiều. Với cú pháp dấu ngoặc nhọn ký hiệu đô la, bạn có thể thấy rõ hơn phần nào trong chuỗi của mình đang sử dụng một biến. Nhìn thoáng qua, tôi có thể nhanh chóng nhận ra đây là một biến
• với trình soạn thảo mã của tôi, nó sẽ làm nổi bật cú pháp được cải thiện

Cách sử dụng chữ mẫu trong phản ứng

Khi làm việc với các mẫu chữ trong JSX, bạn phải đảm bảo rằng mọi biểu thức bên trong dấu kiểm ngược của bạn ( ${expression} ) sẽ dẫn đến một chuỗi

Chữ mẫu được bao quanh bởi ký tự backtick (` `) (dấu trọng âm) thay vì dấu ngoặc kép hoặc dấu nháy đơn. Mẫu chữ có thể chứa giữ chỗ. Chúng được biểu thị bằng ký hiệu đô la và dấu ngoặc nhọn ( ${expression} )

Sự khác biệt giữa chuỗi nối và chữ mẫu

Không giống như các chuỗi được nối, chúng ta có thể sắp xếp các biểu thức trực tiếp vào các ký tự mẫu, nghĩa là chúng ta có thể dễ dàng kéo các giá trị vào chuỗi của mình

Nếu chúng ta sử dụng

var str1 = new String( "This is string one" );
var str2 = new String( "This is string two" );
var str3 = str1.concat( str2 );
console.log("str1 + str2 : "+str3)

var str1 = new String( "This is string one" );
var str2 = new String( "This is string two" );
var str3 = str1.concat( str2 );
console.log("str1 + str2 : "+str3)

Phương thức

var str1 = new String( "This is string one" );
var str2 = new String( "This is string two" );
var str3 = str1.concat( str2 );
console.log("str1 + str2 : "+str3)

concat(str1)
concat(str1, str2)
concat(str1, str2, /* …, */ strN)

var str1 = new String( "This is string one" );
var str2 = new String( "This is string two" );
var str3 = str1.concat( str2 );
console.log("str1 + str2 : "+str3)

var str1 = new String( "This is string one" );
var str2 = new String( "This is string two" );
var str3 = str1.concat( str2 );
console.log("str1 + str2 : "+str3)

var str1 = new String( "This is string one" );
var str2 = new String( "This is string two" );
var str3 = str1.concat( str2 );
console.log("str1 + str2 : "+str3)

var str1 = new String( "This is string one" );
var str2 = new String( "This is string two" );
var str3 = str1.concat( str2 );
console.log("str1 + str2 : "+str3)

str1 + str2 : This is string oneThis is string two

var str1 = new String( "This is string one" );
var str2 = new String( "This is string two" );
var str3 = str1.concat( str2 );
console.log("str1 + str2 : "+str3)