SoFunction
Updated on 2025-03-01

Three ways to convert variables to strings in Javascript

Preface

As you should all know, for JavaScript, there are 3 different ways to convert variables into strings. This article will introduce these methods in detail and compare their pros and cons. I won’t say much below, let’s take a look at the detailed introduction together.

3 ways

There are three ways to convert variables to strings as follows:

  • ()
  • "" + value
  • String(value)

When the value is null or undefined, the first method will not work. Method 2 and Method 3 are basically the same.

""+value:Add value to an empty string to convert it to a string. This method is actually a slightly obscure technique that may make it difficult for others to understand the developer's intentions. However, this is a matter of opinion, and some people prefer this method.

String(value): This method is very clear: useString()The function converts the value to a string. but,String()There are two different usages, which are easy to confuse, especially for Java developers. whenString()When used together with the operator new as a constructor, it returns a newly created String object; when called without the new operatorString()When it converts the value to the original string. The two are very different:

> String("Fundebug") === new String("Fundebug")
false
> typeof String("Fundebug")
'string'
> String("Fundebug") instanceof String
false
> typeof new String("Fundebug")
'object'
> new String("Fundebug") instanceof String
true

In fact,String()It's not common to use as a constructor, so just use it to convert the string.

The nuances of ""+value and String(value)

""+valueandString(value)All can convert values ​​into strings, how do they do it? In fact, although they have the same results, they have slightly different methods.

Convert primitive primitive type to string

Both methods use internal functionsToString()Convert primitive primitive types to strings.ToString()Functions are defined in ECMAScript 5.1 (§9.8), but cannot be used directly, so they are called internal functions. The following table showsToString()How to convert a primitive primitive type to a string:

parameter result
undefined "undefined"
null "null"
Boolean "true" or "false"
Number Convert numbers to strings, for example: "1.765"
String No conversion required

Convert Object to String

Both methods convert the Object to a primitive before converting it to a string. The difference is that ""+value uses internal functionsToPrimitive(Number)(except for the date type), andString(value)Using internal functionsToPrimitive(String)

  • ToPrimitive(Number): Call first , if the result is primitive, it will be returned; otherwise, it will be called again() , if the result is primitive, it will return; otherwise, it will return TypeError.
  • ToPrimitive(String): andToPrimitive(Number)Similar, just call it first() , call it later()

The difference can be learned by the following example, obj is as follows:

var obj = {
 valueOf: function()
 {
  ("valueOf");
  return {};
 },
 toString: function()
 {
  ("toString");
  return {};
 }
};

Call result:

> "" + obj
valueOf
toString
TypeError: Cannot convert object to primitive value
> String(obj)
toString
valueOf
TypeError: Cannot convert object to primitive value

Their results are the same

""+valueandString(value)Although different, we rarely feel it. Because, most objects use the defaultvalueOf() , which returns the object itself:

> var x = {}
> () === x
true

becausevalueOf()The return value is not primitive, soToPrimitive(Number)Will skipvalueOf(), and returntoString()return value. In this way,ToPrimitive(String)The return value of 'is the same.

When object is a Boolean, Number, or String instance,valueOf()Primitive will be returned. This means that the calculation process of both is as follows:

  • ToPrimitive(Number) valueOf()Returns the primitive value and then useToString()Convert to a string.
  • ToPrimitive(String) : toString()passToString()The function converts the primitive value to a string.

It can be seen that although the calculation process is different, their results are the same.

in conclusion

So which method should you choose? If you can make sure the value is not null and undefined, then you might as well use it() . Otherwise, you can only use it""+valueandString(value), they are basically the same.

Summarize

The above is the entire content of this article. I hope the content of this article will be of some help to your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.

refer to

  • JavaScript values: not everything is an object
  • What is {} + {} in JavaScript?
  • String concatenation in JavaScript
  • JavaScript String Objects

original:Converting a value to string in JavaScript

Translator:Fundebug