Có 3 cách nối chuỗi trong JavaScript. Trong hướng dẫn này, bạn sẽ tìm hiểu các cách khác nhau và sự đánh đổi giữa chúng
Toán tử let
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
3
let
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
Toán tử
3 giống như bạn sử dụng để cộng hai số có thể được sử dụng để nối hai chuỗilet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
Bạn cũng có thể sử dụng
5, trong đólet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
6 là viết tắt củalet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
7let
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
Nếu vế trái của toán tử
3 là một chuỗi, JavaScript sẽ ép vế phải thành một chuỗi. Điều đó có nghĩa là an toàn khi nối các đối tượng, số,let
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
9 vàlet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
0let
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
Các toán tử
3 vàlet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
5 rất nhanh trên các công cụ JavaScript hiện đại, vì vậy không cần phải lo lắng về thứ gì đó như lớp StringBuilder của Javalet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
let
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
31
let
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
Hàm
31 tạo chuỗi mới từ việc ghép tất cả các phần tử trong mảng. Ví dụlet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
Tham số đầu tiên của
33 được gọi là dấu tách. Theo mặc định, dấu phân cách là một dấu phẩy duy nhấtlet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
34let
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
Bạn có thể chuyển vào bất kỳ dấu phân cách nào bạn muốn. Dấu phân cách làm cho
31 trở thành lựa chọn ưu tiên để nối các chuỗi nếu bạn thấy mình lặp đi lặp lại cùng một ký tự. Ví dụ: bạn có thể sử dụnglet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
36 làm dấu phân cách để nối một mảng các từlet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
Hoặc bạn có thể sử dụng
37 để nối các đoạn URL lại với nhaulet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
Dấu phân cách làm cho
31 trở thành một cách rất linh hoạt để nối các chuỗi. Nếu bạn muốn kết hợp nhiều chuỗi với nhau, thông thường bạn nên sử dụng vòng lặplet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
33 thay vì vòng lặplet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
30 vớilet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
3let
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
Chuỗi JavaScript có phương thức
32 tích hợp. Hàmlet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
32 nhận một hoặc nhiều tham số và trả về chuỗi đã sửa đổi. Các chuỗi trong JavaScript là bất biến, vì vậylet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
32 không sửa đổi chuỗi tại chỗlet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
Nhược điểm của việc sử dụng
32 là bạn phải chắc chắn rằnglet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
36 là một chuỗi. Bạn có thể chuyển tham số không phải chuỗi cholet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
32, nhưng bạn sẽ nhận được TypeError nếulet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
38let
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
Hàm
32 hiếm khi được sử dụng vì nó có nhiều trường hợp lỗi hơn toán tửlet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
3. Ví dụ: bạn sẽ gặp phải hành vi không mong muốn nếu gọilet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
32 trên một giá trị xảy ra là một mảng. Bạn nên sử dụnglet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
3 thay vìlet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
32 trừ khi bạn có lý do chính đánglet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
Toán tử
6 có thể được hiểu ở ba cấp độ khác nhau. Ở cấp độ đơn giản nhất, khi được sử dụng với toán hạng boolean,if
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
6 thực hiện phép toán AND Boolean trên hai giá trị. nó trả vềif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
8 khi và chỉ khi cả toán hạng đầu tiên và toán hạng thứ hai của nó đều làif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
8. Nếu một hoặc cả hai toán hạng này làif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
0, nó sẽ trả vềif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
0if
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
6 thường được dùng như một từ kết hợp để nối hai biểu thức quan hệif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
x
===
0
&&
y
===
0
// true if, and only if, x and y are both 0
Các biểu thức quan hệ luôn đánh giá bằng
8 hoặcif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
0, vì vậy khi được sử dụng như thế này, chính toán tửif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
6 trả vềif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
8 hoặcif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
0. Các toán tử quan hệ có độ ưu tiên cao hơnif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
6 [vàif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
6], vì vậy các biểu thức như thế này có thể được viết một cách an toàn mà không cần dấu ngoặc đơnlet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
Nhưng
6 không yêu cầu toán hạng của nó phải là giá trị boolean. Hãy nhớ lại rằng tất cả các giá trị JavaScript là “trung thực” hoặc “sai. ” [Xem §3. 4 để biết chi tiết. Các giá trị giả làif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
0,if
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
9,let
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
0,if
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
1,if
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
2,if
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
3 vàif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
4. Tất cả các giá trị khác, bao gồm tất cả các đối tượng, là trung thực. ] Cấp độ thứ hai mà tại đó có thể hiểuif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
6 là toán tử Boolean AND cho các giá trị trung thực và giả. Nếu cả hai toán hạng là trung thực, toán tử trả về một giá trị trung thực. Mặt khác, một hoặc cả hai toán hạng phải là giả và toán tử trả về giá trị giả. Trong JavaScript, bất kỳ biểu thức hoặc câu lệnh nào mong đợi giá trị boolean sẽ hoạt động với giá trị true hoặc false, do đó, việcif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
6 không phải lúc nào cũng trả vềif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
8 hoặcif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
0 không gây ra sự cố thực tếif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
Lưu ý rằng mô tả này nói rằng toán tử trả về “giá trị trung thực” hoặc “giá trị giả” nhưng không chỉ định giá trị đó là gì. Để làm được điều đó, chúng ta cần mô tả
6 ở cấp độ thứ ba và cấp độ cuối cùng. Toán tử này bắt đầu bằng cách đánh giá toán hạng đầu tiên của nó, biểu thức bên trái của nó. Nếu giá trị bên trái là sai, thì giá trị của toàn bộ biểu thức cũng phải là sai, vì vậy,if
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
6 chỉ cần trả về giá trị bên trái và thậm chí không đánh giá biểu thức bên phảiif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
Mặt khác, nếu giá trị bên trái là trung thực, thì giá trị chung của biểu thức phụ thuộc vào giá trị bên phải. Nếu giá trị bên phải là trung thực, thì giá trị tổng thể phải là trung thực và nếu giá trị bên phải là giả, thì giá trị tổng thể phải là giả. Vì vậy, khi giá trị bên trái là true, toán tử
6 sẽ đánh giá và trả về giá trị bên phảiif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
let
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
Điều quan trọng là phải hiểu rằng
6 có thể hoặc không thể đánh giá toán hạng bên phải của nó. Trong ví dụ mã này, biếnif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
63 được đặt thànhif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
9 và biểu thứclet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
65, nếu được đánh giá, sẽ gây ra TypeError. Nhưng mã sử dụngif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
6 theo cách thành ngữ đểif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
65 chỉ được đánh giá nếuif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
63 là trung thực—không phảiif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
9 hoặclet
o
=
{
x
:
1
};
let
p
=
null
;
o
&&
o
.
x
// => 1: o is truthy, so return value of o.x
p
&&
p
.
x
// => null: p is falsy, so return it and don't evaluate p.x
0if
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
Hành vi của
6 đôi khi được gọi là đoản mạch và đôi khi bạn có thể thấy mã cố tình khai thác hành vi này để thực thi mã có điều kiện. Ví dụ: hai dòng mã JavaScript sau đây có tác dụng tương đươngif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
if
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
Nói chung, bạn phải cẩn thận bất cứ khi nào bạn viết một biểu thức có tác dụng phụ [gán, tăng, giảm hoặc gọi hàm] ở vế phải của
6. Những tác dụng phụ đó có xảy ra hay không phụ thuộc vào giá trị của vế tráiif
[
a
===
b
]
stop
[];
// Invoke stop[] only if a === b
[
a
===
b
]
&&
stop
[];
// This does the same thing
Mặc dù cách thức hoạt động của toán tử này hơi phức tạp, nhưng nó thường được sử dụng phổ biến nhất như một toán tử đại số Boolean đơn giản hoạt động trên các giá trị trung thực và sai lệch