CODESCRACKER

JavaScript String (with Examples)

A string in JavaScript is a sequence of characters used to hold or store textual data.

Create a string in JavaScript

To create a string in JavaScript, follow any of the two ways:

For example:

let x = "codescracker";
let y = "JavaScript is Fun.";

Or

let x = new String("codescracker");
let y = new String("JavaScript is Fun.");

A string in JavaScript can contain zero, one, or more sequences of characters. Also, string literals in JavaScript will be in single or double quotes. For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p id="para1"></p>
   <p id="para2"></p>
   <p id="para3"></p>
   <p id="para4"></p>
   <p id="para5"></p>
   <p id="para6"></p>
   <p id="para7"></p>

   <script>
      let myString1 = "";
      let myString2 = '';
      let myString3 = "c";
      let myString4 = "5";
      let myString5 = 'g';
      let myString6 = "I'm from Boston";
      let myString7 = "Where are you from?";
      
      document.getElementById("para1").innerHTML = typeof(myString1);
      document.getElementById("para2").innerHTML = typeof(myString2);
      document.getElementById("para3").innerHTML = typeof(myString3);
      document.getElementById("para4").innerHTML = typeof(myString4);
      document.getElementById("para5").innerHTML = typeof(myString5);
      document.getElementById("para6").innerHTML = typeof(myString6);
      document.getElementById("para7").innerHTML = typeof(myString7);
   </script>
   
</body>
</html>
Output

Please note: The typeof() method returns the type of value or variable defined as its argument.

How do I quote a substring in a JavaScript string?

If the quote you're going to use to quote any substring inside a string does not match the quote used to quote the string literal, then it will be okay. For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p id="para1"></p>
   <p id="para2"></p>

   <script>
      let myString1 = "Hey, I am from 'Boston'. Where are you from?";
      let myString2 = 'Hey, I am from "Boston". Where are you from?';
      
      document.getElementById("para1").innerHTML = myString1;
      document.getElementById("para2").innerHTML = myString2;
   </script>
   
</body>
</html>
Output

But sometimes we find that the quote of the string literal is the same as the quote that we're needing to use. For example:

'Hey, I'm from Boston.'

Notice the single quote in between I and m. The solution is to use an escape sequence. For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>

   <script>
      let mystr = 'Hey, I\'m from Boston.';
      document.getElementById("xyz").innerHTML = mystr;
   </script>
   
</body>
</html>
Output

That is, the backslash character (\) is used in all these similar scenarios. Also, if you need to include a backslash in the string, then, in that case, use double backslashes (\\). For example:

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>

   <script>
      let mystr = 'Hello\\Hi';
      document.getElementById("xyz").innerHTML = mystr;
   </script>
   
</body>
</html>
Output

JavaScript Escape Characters

Here is the list of escape characters used in JavaScript:

Since these escape characters are developed to work with printers, fax machines, etc., this does not make sense, especially when working with HTML. Therefore, I am unable to show you examples regarding these characters. But remember its description.

JavaScript String Methods

Here is the list of methods that can be used with JavaScript strings, along with their descriptions:

Please note: A few methods, which are very rarely used in rare cases, are skipped.

JavaScript String Example

HTML with JavaScript Code
<!DOCTYPE html>
<html>
<body>

   <script>
      let x, res, temp;
      function myFun()
      {
         x = document.getElementById("str").value;
         temp = document.getElementById("mypara");
         temp.style.display = "block";
         res = x.toUpperCase();
         document.getElementById("result").innerHTML = res;
      }
   </script>

   <p>Enter a String: <input id="str"><br><br>
   <button onclick="myFun()">Convert to Uppercase</button></p>
   <p id="mypara" style="display: none;">
   Output: <span id="result"></span></p>
   
</body>
</html>
Output

Enter a String:

Please note: To find the length of a string in JavaScript, use the string.length property.

JavaScript Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!