Preface
If you follow Airbnb's style guide, the preferred method is to use "String()" 👍
It's also the one I use because it's the most explicit - letting others easily follow the intent of your code 🤓
Remember that the best code is not necessarily the smartest way, it is the code that best conveys code understanding to others 💯
const value = 12345;
// Concat Empty String
value + '';
// Template Strings
`${value}`;
//
(value);
// toString()
();
// String()
String(value);
// RESULT
// '12345'
5 ways to compare
OK, let's test 5 ways with different values. Here are the variables we want to test for:
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;
Combined with empty strings
string + ''; // 'hello' number + ''; // '123' boolean + ''; // 'true' array + ''; // '1,2,3' object + ''; // '[object Object]' undefinedValue + ''; // 'undefined' nullValue + ''; // 'null' // ⚠️ symbolValue + ''; // ❌ TypeError
From here you can see that if the value is a Symbol, this method will throw a TypeError. Otherwise, everything looks good.
Template string
`${string}`; // 'hello'
`${number}`; // '123'
`${boolean}`; // 'true'
`${array}`; // '1,2,3'
`${object}`; // '[object Object]'
`${undefinedValue}`; // 'undefined'
`${nullValue}`; // 'null'
// ⚠️
`${symbolValue}`; // ❌ TypeError
The result of using a template string is basically the same as the result of combining an empty string. Again, this may not be the ideal way to handle it, as Symbol it throws a TypeError.
If you are curious, it is TypeError: TypeError: Cannot convert a Symbol value to a string
（）
// ⚠️
(string); // '"hello"'
(number); // '123'
(boolean); // 'true'
(array); // '[1,"2",3]'
(object); // '{"one":1}'
(nullValue); // 'null'
(symbolValue); // undefined
(undefinedValue); // undefined
Therefore, you don't usually use converting values to strings. And it really doesn't happen forcibly here. So you understand all the tools available. Then you can decide which tool to use instead of using it according to the situation 👍
One thing I want to point out because you may not be paying attention to it. When you use it on the actual string value, it changes it to a quoted string.
.toString（）
(); // 'hello' (); // '123' (); // 'true' (); // '1,2,3' (); // '[object Object]' (); // 'Symbol(123)' // ⚠️ (); // ❌ TypeError (); // ❌ TypeError
So PK is actually in toString() and String() when you want to convert a value into a string. Except that it throws an error for undefined and null, the others perform well. So be sure to pay attention to this.
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'
OK, I think we found the winner 🏆
As you can see, String() handles null and undefined quite well. No errors are thrown - unless that's what you want. Generally speaking, remember my suggestions. You will know your application best, so you should choose the one that best suits your situation.
Conclusion: String() 🏆
After showing you how all the different methods handle different types of values. Hopefully you understand these differences and you will know the tools you want to use next time you process your code. If you're not sure, String() is always a good default choice 👍
Summarize
The above is the entire content of this article. I hope that the content of this article has certain reference value for your study or work. Thank you for your support.