JavaScript String (with Examples)

String in JavaScript is a sequence of characters, used to hold/store textual data.

Create a String in JavaScript

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

Create string directly using string literals, as string primitive
Create string using String() constructor, as object

For example:

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

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

String in JavaScript can contain zero, one, or more sequence of characters. Also a 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/variable defined as its argument.

How to Quote Substring in 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 sometime we find that the quote of the string literal is 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 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 type of similar scenarios. Also, if you need to include a backslash itself 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 are the list of escape characters used in JavaScript:

\ converts some special character like (' and "") into string.
\b moves the cursor backward (one position or character left). The \b character does not erase anything while moving the cursor backward.
\f loads the next page while working with printers, or clears the screen while working in some terminal emulators.
\v position the form to the next line tab stop. The size of lines will be decided by the default size of the tab while working on that particular software.
\n inserts a newline or moves the cursor to the newline, so that, next character starts with newline. While working with HTML, it doesn't work. The BR tag work instead. But using \n inserts a new line in the source.
\r is similar to \n. But it depends on the operating system. As some treats \n\r as newline, some treats \n as newline, whereas some treats \r\n as newline
\t inserts a horizontal tab (a space of around 1-4 or some other number of characters, depending on the size of horizontal tab)

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

JavaScript String Methods

Here are the list of methods that can be used with JavaScript string, along with its description:

toLowerCase - convert specified string to lowercase
toUpperCase - convert specified string to uppercase
concat - concatenate or join two or more strings
search - searches a substring (value) in a string using regular expression
indexOf() - find the position or index number of specified value (or substring) in a string
match() - match a string with/using a regular expression
replace() - replace a string using either string itself or regular expression
includes() - check whether a string contains specified substring or not
substr() - extract substring from specified position in specified string
slice() - extract required substring from specified string
charAt() - find character available at specified position in a specified string
repeat() - repeat a string for n number of times
split() - split a specified string into an array
charCodeAt() - find the Unicode of a character at specified index in a specified string
fromCharCode() - convert Unicode values to its equivalent characters or strings
startsWith() - check if a specified string starts with specified substring
endsWith() - check whether a string ends with a specified substring or not
trim() - remove all whitespaces from beginning and end of the string
lastIndexOf() - returns the position of last occurrence of specified value in a given string

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 string.length property.