Video học lập trình mỗi ngày

Convert value to String in javascript. Quan trọng trong tipjs này, chúng ta sẽ tìm ra một phương pháp đúng đắn để chuyển một giá trị sang chuỗi sử dụng javascript. Và thật bất ngờ đó không phải là value.toString().

Yêu cầu người đọc

- Biết cơ bản về javascript

5 cách chuyển value sang string trong javascript

Có một câu của những người nhiều năm kinh nghiệm đó là: "Một code tốt thật sự không nhất thiết phải là code một cách thông minh nhất, mà đó là cách truyền đạt code của bạn cho những người khác một cách dễ dàng nhất."

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 convert value to string

Ok rồi, chúng ta sẽ check xem phương án nào là hiệu quả cho việc "convert value to String javascript". Với một data cho trướ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;

#Concat Empty String

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

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

Có vẻ khá tốt, ngoại trừ symbolValue bị một error

#Template String

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

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

TypeError: Cannot convert a Symbol value to a string

#JSON.stringify()

// ⚠️
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

#toString()

string.toString(); // 'hello'
number.toString(); // '123'
boolean.toString(); // 'true'
array.toString(); // '1,2,3'
object.toString(); // '[object Object]'
symbolValue.toString(); // 'Symbol(123)'

// ⚠️
undefinedValue.toString(); // ❌ TypeError
nullValue.toString(); // ❌ TypeError

#String()

String(string); // 'hello'
String(number); // '123'
String(boolean); // 'true'
String(array); // '1,2,3'
String(object); // '[object Object]'
String(symbolValue); // 'Symbol(123)'
String(undefinedValue); // 'undefined'
String(nullValue); // 'null'

Bạn cũng có thể thấy sau 5 cách thì cách cuối cùng dùng String() là cách ngon nhất, có thể handle được null và undefined.,

Kết luận: String() 🏆

Sau khi chỉ cho bạn cách tất cả các phương thức khác nhau xử lý 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 công cụ nào sẽ nhận được trong lần tiếp theo bạn giải quyết mã của mình. Nếu bạn không chắc chắn, String () luôn là cách tốt nhất về việc này.

Resources

• MDN Web Docs: toString
• Airbnb JavaScript Style Guide
• 2ality: Converting a value to string in JavaScript
• Convert Number to String
• Stack Overflow: Casting to string
• Addition operator in details
• YDKJS: Coercion
• samanthaming