How to convert value to string in javascript

Conversion method: 1. Use the " " operator to combine with the empty string, the syntax is "value''"; 2. Use the template string, the syntax is "${value}"; 3. Use "JSON.stringify" (value)" statement; 4. Use the "value.toString()" statement; 5. Use the "String(value)" statement.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

Five ways to convert a value to a string in JavaScript

const value = 12345;
// Concat Empty String
value + '';
// Template Strings
`${value}`;
// JSON.stringify
JSON.stringify(value);
// toString()
value.toString();
// String()
String(value);
// RESULT
// '12345'

Compare 5 ways

Okay, let's test 5 ways with different values. Here are the variables we want to test it on:

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 the empty string using the " " operator

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

From here you can see if the value is A Symbol, this method will throw 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 the template string is basically the same as combining the empty string. Again, this may not be the ideal way to handle Symbol since it will throw a TypeError.

If you're curious, here's the 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

So you don't typically use JSON.stringify to convert a value to a string. And there's really no forcing happening here. So you know all the tools available. You can then decide what tool to use instead of using it on a case-by-case basis. When you use it on an actual string value, it changes it to a quoted string.

.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

So PK is actually between toString() and String() when you want to convert a value to a string. Everything works fine except that it throws an error for undefined and null. 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'

Well I think we found a winner

As you can see , String() handles null and undefined quite well. No errors will be thrown - unless that's what you want. Generally remember my advice. You will know your application best, so you should choose what works best for your situation.

Conclusion: String()

After showing you how all the different methods handle different types of values. Hopefully you understand the differences and you'll know which tools to use the next time you're working on code. If you're not sure, String() is always a good default choice

[Recommended learning:

javascript advanced tutorial

】

The above is the detailed content of How to convert value to string in javascript. For more information, please follow other related articles on the PHP Chinese website!