Chuyển đổi chuỗi thành khóa đối tượng javascript

Đây cũng là cách tôi sử dụng vì nó rõ ràng nhất - giúp người khác dễ dàng theo dõi ý định mã của bạn 🤓

Hãy nhớ rằng mã tốt nhất không nhất thiết phải là cách thông minh nhất, đó là cách truyền đạt tốt nhất sự hiểu biết về mã của bạn cho người khác 💯

const value = 12345;

// Concat Empty String
value + '';

// Template Strings
`${value}`;

// JSON.stringify
JSON.stringify(value);

// toString()
value.toString();

// String()
String(value);

// RESULT
// '12345'

# So sánh 5 cách

Được rồi, hãy kiểm tra 5 cách với các giá trị khác nhau. Dưới đây là các biến chúng tôi sẽ kiểm tra những điều này đối với

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

# Concat chuỗi rỗng

string + ''; // 'hello'
number + ''; // '123'
boolean + ''; // 'true'
array + ''; // '1,2,3'
object + ''; // '[object Object]'
undefinedValue + ''; // 'undefined'
nullValue + ''; // 'null'

// ⚠️
symbolValue + ''; // ❌ TypeError

Từ đây, bạn có thể thấy rằng phương thức này sẽ ném ra một

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

1 nếu giá trị là một

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

2. Nếu không, mọi thứ có vẻ khá tốt

# Chuỗi mẫu

`${string}`; // 'hello'
`${number}`; // '123'
`${boolean}`; // 'true'
`${array}`; // '1,2,3'
`${object}`; // '[object Object]'
`${undefinedValue}`; // 'undefined'
`${nullValue}`; // 'null'

// ⚠️
`${symbolValue}`; // ❌ TypeError

Kết quả của việc sử dụng Chuỗi mẫu về cơ bản giống như Concat Empty String. Một lần nữa, đây có thể không phải là cách lý tưởng khi xử lý

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

2 vì nó sẽ ném một

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

1

Đây là TypeError nếu bạn tò mò.

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

5

# JSON. xâu chuỗi ()

// ⚠️
JSON.stringify(string); // '"hello"'
JSON.stringify(number); // '123'
JSON.stringify(boolean); // 'true'
JSON.stringify(array); // '[1,"2",3]'
JSON.stringify(object); // '{"one":1}'
JSON.stringify(nullValue); // 'null'
JSON.stringify(symbolValue); // undefined
JSON.stringify(undefinedValue); // undefined

Vì vậy, bạn thường KHÔNG sử dụng JSON. stringify để chuyển đổi một giá trị thành một chuỗi. Và thực sự không có sự ép buộc nào xảy ra ở đây. Tôi chủ yếu bao gồm cách này để được hoàn thành. Vì vậy, bạn nhận thức được tất cả các công cụ có sẵn cho bạn. Và sau đó bạn có thể quyết định nên sử dụng và không sử dụng công cụ nào tùy thuộc vào tình huống 👍

Một điều tôi muốn chỉ ra bởi vì bạn có thể không nắm bắt được. Khi bạn sử dụng nó trên một giá trị

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

6 thực tế, nó sẽ thay đổi nó thành một chuỗi có dấu ngoặc kép

Bạn có thể đọc thêm về điều này trong Kyle Simpson, "You Don't Know JS series". Chuỗi hóa JSON

Lưu ý bên lề về tầm quan trọng của việc biết các nguyên tắc cơ bản của bạn

Vâng, bạn có thể nhận thấy trong ghi chú mã của tôi, tôi thường trích dẫn sách của Kyle. thành thật mà nói tôi đã học được rất nhiều về nó. Không xuất thân từ nền tảng khoa học máy tính, tôi còn thiếu rất nhiều khái niệm cơ bản. Và cuốn sách của anh ấy đã khiến tôi nhận ra tầm quan trọng của việc hiểu các nguyên tắc cơ bản. Đối với những người muốn trở thành một lập trình viên nghiêm túc, cách để lên cấp là THỰC SỰ hiểu các nguyên tắc cơ bản. Không có nó, rất khó để lên cấp. Cuối cùng bạn đoán ra vấn đề. Nhưng nếu bạn biết những nguyên tắc cơ bản, bạn sẽ hiểu "tại sao" của điều gì đó. Và biết "tại sao" sẽ giúp bạn thực hiện tốt hơn "làm thế nào". Dù sao đi nữa, rất khuyến khích loạt bài này cho những người đang cố gắng trở thành một lập trình viên cao cấp

# toString()

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

1

Vì vậy, trận chiến thực sự đến với

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

7 và

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

8 khi bạn muốn chuyển đổi một giá trị thành một chuỗi. cái này làm khá tốt. Ngoại trừ nó sẽ báo lỗi cho

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

9 và

string + ''; // 'hello'
number + ''; // '123'
boolean + ''; // 'true'
array + ''; // '1,2,3'
object + ''; // '[object Object]'
undefinedValue + ''; // 'undefined'
nullValue + ''; // 'null'

// ⚠️
symbolValue + ''; // ❌ TypeError

0. Vì vậy, hãy chắc chắn lưu tâm đến điều này

# Sợi dây()

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

6

Được rồi, tôi nghĩ chúng ta đã tìm ra người chiến thắng 🏆

Như bạn có thể thấy, phương thức

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

8 xử lý khá tốt đối với

string + ''; // 'hello'
number + ''; // '123'
boolean + ''; // 'true'
array + ''; // '1,2,3'
object + ''; // '[object Object]'
undefinedValue + ''; // 'undefined'
nullValue + ''; // 'null'

// ⚠️
symbolValue + ''; // ❌ TypeError

0 và

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

9. Không có lỗi nào được đưa ra - trừ khi đó là điều bạn muốn. Hãy nhớ gợi ý của tôi nói chung. Bạn sẽ biết rõ nhất về ứng dụng của mình, vì vậy bạn nên chọn cách phù hợp nhất cho tình huống của mình

# Sự kết luận. Chuỗi() 🏆

Sau khi chỉ cho bạn cách tất cả các phương thức khác nhau xử lý các loại giá trị khác nhau. Hy vọng rằng bạn nhận thức được sự khác biệt và bạn sẽ biết nên sử dụng công cụ nào vào lần tới khi bạn xử lý mã của mình. Nếu bạn không chắc chắn, thì

const string = "hello";
const number = 123;
const boolean = true;
const array = [1, "2", 3];
const object = {one: 1 };
const symbolValue = Symbol('123');
const undefinedValue = undefined;
const nullValue = null;

8 luôn là một giá trị mặc định tốt 👍

# Tại sao bạn không nên sử dụng string + ''; // 'hello' number + ''; // '123' boolean + ''; // 'true' array + ''; // '1,2,3' object + ''; // '[object Object]' undefinedValue + ''; // 'undefined' nullValue + ''; // 'null' // ⚠️ symbolValue + ''; // ❌ TypeError 5

Bạn có thể nhận thấy trong styleguide của Airbnb, nó đề cập đến việc không sử dụng

string + ''; // 'hello'
number + ''; // '123'
boolean + ''; // 'true'
array + ''; // '1,2,3'
object + ''; // '[object Object]'
undefinedValue + ''; // 'undefined'
nullValue + ''; // 'null'

// ⚠️
symbolValue + ''; // ❌ TypeError

5. Hãy xem tại sao

string + ''; // 'hello'
number + ''; // '123'
boolean + ''; // 'true'
array + ''; // '1,2,3'
object + ''; // '[object Object]'
undefinedValue + ''; // 'undefined'
nullValue + ''; // 'null'

// ⚠️
symbolValue + ''; // ❌ TypeError

3

Vì vậy, khi bạn tạo một giá trị bằng hàm tạo với từ khóa

string + ''; // 'hello'
number + ''; // '123'
boolean + ''; // 'true'
array + ''; // '1,2,3'
object + ''; // '[object Object]'
undefinedValue + ''; // 'undefined'
nullValue + ''; // 'null'

// ⚠️
symbolValue + ''; // ❌ TypeError

7, bạn thực sự đang tạo một trình bao bọc đối tượng. Và đây là những gì nó xuất ra

string + ''; // 'hello'
number + ''; // '123'
boolean + ''; // 'true'
array + ''; // '1,2,3'
object + ''; // '[object Object]'
undefinedValue + ''; // 'undefined'
nullValue + ''; // 'null'

// ⚠️
symbolValue + ''; // ❌ TypeError

5

Vấn đề là, Chuỗi mới("123") tạo đối tượng trình bao chuỗi xung quanh "123", chứ không chỉ chính giá trị "123" nguyên thủy. [đã chỉnh sửa]

Bạn không biết JS của Kyle Simpson

Một lý do tại sao bạn muốn làm điều này là

Có rất ít ứng dụng thực tế cho các đối tượng String như được tạo bởi new String("foo"). Ưu điểm duy nhất mà một đối tượng Chuỗi có trên một giá trị chuỗi nguyên thủy là với tư cách là một đối tượng, nó có thể lưu trữ các thuộc tính

string + ''; // 'hello'
number + ''; // '123'
boolean + ''; // 'true'
array + ''; // '1,2,3'
object + ''; // '[object Object]'
undefinedValue + ''; // 'undefined'
nullValue + ''; // 'null'

// ⚠️
symbolValue + ''; // ❌ TypeError

6

StackOverflow. Mục đích của Chuỗi mới(“x”) trong JavaScript là gì?

# Đầu vào của cộng đồng

@MaxStalker. Tôi sẽ sử dụng một phương pháp khác tùy thuộc vào ứng dụng

• "" + giá trị. chỉ cần truyền số thành chuỗi - giả sử bên trong. bản đồ()
• JSON. xâu chuỗi (val). cần chuyển đổi đối tượng nhỏ không lồng nhau
• toString(cơ số). chuyển đổi số thành thập lục phân hoặc nhị phân

@frontendr. Cẩn thận khi sử dụng JSON. stringify, điều đó sẽ thay đổi một chuỗi thành một chuỗi có dấu ngoặc kép 😉

@siêu. chuyên nghiệp. nhà phát triển. tôi cũng biết. new String (foo) nhưng tôi không thích phương thức này (nó sẽ tạo ra một đối tượng là String, ngược lại String (không có "new") tạo ra chuỗi nguyên thủy)

@BrunoGiubilei. khi nối chuỗi rỗng, hầu như đúng khi khai báo chuỗi rỗng trước, bởi vì khi bạn nối thêm một giá trị, tổng đã được xử lý trước