How do you convert something to a string in javascript?

Examples

Convert different values to strings:

String[new Date[]];
String["12345"];
String[12345];

Try it Yourself »

Definition and Usage

The String[] method converts a value to a string.

Note

The String[] method returns the same as the toString[] method for any value.

Syntax

Parameters

Parameter	Description
value	Required. A JavaScript value.

Return Value

Type	Description
A string.	The value converted to a string.

Browser Support

String[] is an ECMAScript1 [ES1] feature.

ES1 [JavaScript 1997] is fully supported in all browsers:

Chrome	IE	Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes	Yes

More Examples

Examples

Convert different values to strings:

String[Boolean[0]];
String[Boolean[1]];
String[[1,2,3,4]];

Try it Yourself »

CodeTidbit by SamanthaMing.com

If you’re following the Airbnb’s Style Guide, the preferred way is using “String[]” 👍

It’s also the one I use because it’s the most explicit — making it easy for other people to follow the intention of your code 🤓

Remember the best code is not necessarily the most clever way, it’s the one that best communicates the understanding of your code to others…

Warning: This blog post is outdated. Instead, read section “Converting to string” in “JavaScript for impatient programmers”.

In JavaScript, there are three main ways in which any value can be converted to a string. This blog post explains each way, along with its advantages and disadvantages.

Three approaches for converting to string

The three approaches for converting to string are:

1. value.toString[]
2. "" + value
3. String[value]

The problem with approach #1 is that it doesn’t work if the value is

null

or

undefined

. That leaves us with approaches #2 and #3, which are basically equivalent.

• ""+value: The plus operator is fine for converting a value when it is surrounded by non-empty strings. As a way for converting a value to string, I find it less descriptive of one’s intentions. But that is a matter of taste, some people prefer this approach to String[value].
• String[value]: This approach is nicely explicit: Apply the function String[] to value. The only problem is that this function call will confuse some people, especially those coming from Java, because String is also a constructor. However, function and constructor produce completely different results:

      > String["abc"] === new String["abc"]
      false
  
      > typeof String["abc"]
      'string'
      > String["abc"] instanceof String
      false
  
      > typeof new String["abc"]
      'object'
      > new String["abc"] instanceof String
      true
  

  The function produces, as promised, a string [a primitive [1]]. The constructor produces an instance of the type String [an object]. The latter is hardly ever useful in JavaScript, which is why you can usually forget about String as a constructor and concentrate on its role as converting to string.

A minor difference between ""+value and String[value]

Until now you have heard that

+

and

String[]

convert their “argument” to string. But how do they actually do that? It turns out that they do it in slightly different ways, but usually arrive at the same result.

Converting a primitives to string

Both approaches use the internal ToString[] operation to convert primitives to string. “Internal” means: a function specified by the ECMAScript 5.1 [§9.8] that isn’t accessible to the language itself. The following table explains how ToString[] operates on primitives.

Argument	Result
undefined	"undefined"
null	"null"
boolean value	either "true" or "false"
number value	the number as a string, e.g. "1.765"
string value	no conversion necessary

Converting objects to string

Both approaches first convert an object to a primitive, before converting that primitive to string. However,

+

uses the internal ToPrimitive[Number] operation [except for dates [2]], while

String[]

uses ToPrimitive[String].

• ToPrimitive[Number]: To convert an object obj to a primitive, invoke obj.valueOf[]. If the result is primitive, return that result. Otherwise, invoke obj.toString[]. If the result is primitive, return that result. Otherwise, throw a TypeError.
• ToPrimitive[String]: Works the same, but invokes obj.toString[] before obj.valueOf[].

With the following object, you can observe the difference:

    var obj = {
        valueOf: function [] {
            console.log["valueOf"];
            return {}; // not a primitive, keep going
        },
        toString: function [] {
            console.log["toString"];
            return {}; // not a primitive, keep going
        }
    };  

Interaction:

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

    > String[obj]
    toString
    valueOf
    TypeError: Cannot convert object to primitive value

The results are usually the same

The above described difference rarely becomes apparent in practice. Here is why: Most objects use the default implementation of

valueOf[]

which returns

this

for objects.

    > var x = {}
    > x.valueOf[] === x
    true

Hence, ToPrimitive[Number] will skip that method and return the result of

toString[]

, just like ToPrimitive[String]. If, however, an object is an instance of

Boolean

,

Number

or

String

, then

valueOf[]

will return a primitive [the one wrapped by the object]. That means that the two operations now compute their results as follows:

• ToPrimitive[Number] returns the result of applying ToString[] to the result of valueOf[] [the wrapped primitive].
• ToPrimitive[String] returns the result of toString[] [the result of applying ToString[] to the wrapped primitive].

Thus, they both still arrive at the same destination, but by a different route.

Conclusion

Which of the three approaches for converting to string should you choose?

value.toString[]

can be OK, if you are sure that

value

will never be

null

or

undefined

. Otherwise,

""+value

and

String[value]

are mostly equivalent. Which one people prefer is a matter of taste. I find

String[value]

more explicit.

Related posts

1. JavaScript values: not everything is an object [primitives versus objects]
2. What is {} + {} in JavaScript? [explains how the + operator works]
3. String concatenation in JavaScript [how to best concatenate many strings]

How do you convert something into a string?

Is there a toString method in JavaScript?