Why are there two kinds of JavaScript strings?

Question

This one just stabbed me hard. I don't know if it's the case with all browsers (I don't have any other competent browser to test with), but at least Firefox has two kind of string objects.

Open up the Firebugs console and try the following:

>>> "a"
"a"
>>> new String("a")
String { 0="a"}

As you can visually observe, Firefox treats new String("a") and "a" differently. Otherwise however, both kinds of strings seem to behave the same. There is, for instance, evidence that both use the same prototype object:

>>> String.prototype.log = function() { console.log("Logged string: " + this); }
function()
>>> "hello world".log()
Logged string: hello world
>>> new String("hello world").log()
Logged string: hello world

So apparently, both are the same. That is, until you ask for the type.

>>> typeof("a")
"string"
>>> typeof(new String("a"))
"object"

We can also notice that when this is a string, it's always the object form:

>>> var identity = function() { return this }
>>> identity.call("a")
String { 0="a"}
>>> identity.call(new String("a"))
String { 0="a"}

Going a bit further, we can see that the non-object string representation doesn't support any additional properties, but the object string does:

>>> var a = "a"
>>> var b = new String("b")
>>> a.bar = 4
4
>>> b.bar = 4
4
>>> a.bar
undefined
>>> b.bar
4

Also, fun fact! You can turn a string object into a non-object string by using the toString() function:

>>> new String("foo").toString()
"foo"

Never thought it could be useful to call String.toString()! Anyways.

So all these experiments beg the question: why are there two kinds of strings in JavaScript?

---

Comments show this is also the case for every primitive JavaScript type (numbers and bools included).

Answer 1

There are two types of strings in Javascript -- literal strings and String objects. They do behave a little differently. The main difference between the two is that you can add additional methods and properties to a String object. For instance:

var strObj = new String("object mode");
strObj.string_mode = "object"
strObj.get_string_mode = function() { return this.string_mode; }

// this converts it from an Object to a primitive string:
str = strObj.toString();

A string literal is just temporarily cast to a String object to perform any of the core methods.

The same kinds of concepts apply to other data types, too. Here's more on primitive data types and objects.

EDIT

As noted in the comments, string literals are not primitive strings, rather a "literal constant whose type is a built-in primitive [string] value", citing this source.

Answer 2

Your comparing string values to string objects.

"a" is a string value.

"a" === "a"; // true

new String("a") is an string object.

new String("a") === new String("a"); // false

There both strings. "a" just gets the string value "a" where as new String("a") creates a new string object which internally has the string value "a"

Answer 3

Another important thing to remember is the following:

typeof "my-string" // "string"
typeof String('my-string') // 'string'
typeof new String("my-string") // "object". 

Therefore, when testing whether an argument or variable is a string you need to do at least the following.

function isString(arg) {
  if (!arg) {
    return false;
  }
  return typeof arg == "string" || arg.constructor == String;
}

The above function will still fail if you pass in a String object from another frame/iframe. That is:

frames[0].myStringVar.constructor != frames[1].myStringVar.constructor

That is because the constructor String is different for each window context. Therefore, a foolproof isString method would be

function isString(obj) {
   return Object.prototype.toString.call(obj) == "[object String]";
}