How null is Converted to String in JavaScript

In JavaScript null is a predefined keyword that represents an empty value or unknown value of no value. The data type of null is an object. In this article, we will learn how to convert null into String using multiple approaches which are following.

  • Using the String() Method
  • Concatenating null with an Empty string
  • Using the Logical OR (||)
  • Using Ternary Operator

Using the String() Method

The String() in JavaScript is used to convert a value to a String. To convert the null into a String just pass the null into this method. Here is the example to convert null to string using this approach.

Syntax

String( null )

Example 1

In the program below, we convert null to string using the String() method. We also check the type after the conversion

<html>
<head>
   <title> Example: Convert null to String</title>
</head>
<body>
   <p>Convert null to Number using the String() Method</p>
   <p id ="output"></p>
   <script>
      let str = null;
      str = String(str);
      document.getElementById("output").innerHTML += str +"<br>";
      document.getElementById("output").innerHTML += typeof str
   </script>
</body>
</html>

Example 2

Avoid to use new String()

In the program below, we demonstrate why we should not use new with String() to convert null to String. The new String() create an object instead of the string.


<html>
<head>
   <title> Example: Convert null to String</title>
</head>
<body>
   <p>Convert null to Number using the String() Method</p>
   <p id ="output"></p>
   <script>
      let str = null;
      str = new String(str);
      document.getElementById("output").innerHTML += str +"<br>";
      document.getElementById("output").innerHTML += typeof str
   </script>
</body>
</html>

Notice the type of the variable str is object after conversion using new String().

Concatenating null with an Empty String)

If we concatenate null with an empty string (""), the result will be of string type. We can use this technique to convert null to string. We use + operator to concatenate the null and empty string(""). Here is the example to convert null to string using this approach.

Syntax

null + ""

Example

In the below program we concatenate null with "" using + to convert null to string.


<html>
<head>
   <title> Example: Convert null to String</title>
</head>
<body>
   <p>Convert null to Number by concatenating null with empty string</p>
   <p id ="output"></p>
   <script>
      let str = null;
      str = str + ""
      document.getElementById("output").innerHTML += str +"<br>";
      document.getElementById("output").innerHTML += typeof str
   </script>
</body>
</html>

Using Logical OR (||)

The or operator is represented by the || sign in JavaScript. To convert the null into a number we use the OR operator with null and any number and the OR operator will return that Number.

Syntax

null || "null";

Example

In this example, we created a variable num and assigned the value as null || "null". 


<html>
<html>
<head>
   <title> Example: Convert null to String</title>
</head>
<body>
   <p>Convert null to Number using Logical OR (||)</p>
   <p id ="output"></p>
   <script>
      let str = null || " null ";
      document.getElementById("output").innerHTML += str +"<br>";
      document.getElementById("output").innerHTML += typeof str
</script>
</body>
</html>

Using Ternary Operator

The conditional operator or ternary operator first evaluates an expression for a true or false value and then executes one of the two given statements depending upon the result of the evaluation.

Syntax

null ? null : "null"

Example

In the given example it is clear how to convert null to String using Ternary Operator.


<html>
<head>
   <title> Example: Convert null to String</title>
</head>
<body>
   <p>Convert null to Number using Ternary Operator</p>
   <p id ="output"></p>
   <script>
      let str = null ? null: " null ";
      document.getElementById("output").innerHTML += str +"<br>";
      document.getElementById("output").innerHTML += typeof str
   </script>
</body>
</html>
Updated on: 2022-08-11T12:47:31+05:30

20K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements