If you've been using Typescript, you would have definitely come across
String. Have you ever wondered which one you should be using? You might have used them interchangeably and they do work. In fact, there are other types like this,
Boolean. So what are the differences between the two string types and which one should you be using in your projects? Let's find out.
Let's have a look at a simple example of how you create strings using
String in Typescript.
const str = "This is my string"; const strUsingString = new String("This is my string");
The first and most basic difference between the two is that
string is a primitive type whereas
String is an
Object type. Okay, so what are the implications of this tiny difference?
Let's look at an example.
const str = "This is my string"; const strUsingString = new String("This is my string"); console.log(typeof str); // Prints "string". console.log(typeof strUsingString); // Prints "object"!
As you can see, the
typeof operator when used on a string created using
object! This means that you no longer will be able to rely on
typeof checks to differentiate between objects and strings. If you have checks based on this assumption, they will now fail!
const str = "Hi"; const strUsingString = new String("Hi"); console.log(str == "Hi"); // Prints true. Good. console.log(str === "Hi"); // Prints true. Good. console.log(strUsingString == "Hi"); // Prints true. Good. console.log(strUsingString === "Hi"); // Prints false. Wait, what? console.log(str == strUsingString); // Prints true. console.log(str === strUsingString); // Prints false. Are you kidding!!!
Here, the equality checks using the
=== operators fail because
=== not only checks for equality in value but also for equality in type as well. Therefore, even though
strUsingString have the same value "Hi",
str is of type
strUsingString is of type
object and hence the check fails. This will lead to bugs which are very hard to debug.
When you create a string as a literal, no matter how many of them you create, they will all point to the same literal in storage. However, when you create a string using
String, each one creates a brand new object.
Let's look at how the following code is represented in memory.
const str1 = "Hi"; const str2 = "Hi"; const strO1 = new String("Hi"); const strO2 = new String("Hi");
Now, consider the following snippet,
console.log(str1 == str2); // Prints true. Good. console.log(str1 === str2); // Prints true. Good. console.log(strO1 == strO2); // false. Worse! console.log(strO1 === strO2); // false. Even Worse!!
This time both the
=== checks fail. This is because what is being actually compared is the address of the memory locations and not the actual value themselves.
This is a pretty big source of bugs! Just imagine trying to compare two strings and you get
false in spite of them having the same value.
Always use the lowercase versions,
boolean. This will ensure that you do not run into the bugs mentioned above and since the bugs happen at run time, they are very hard to debug.
Hope you learnt something new. Happy coding and see you in the next one.. :)