JavaScript Strings

In JavaScript, String is a sequence of characters which can be alphabets, numbers or special characters, either simply enclosed within quotes or created using the String global object. Some examples of string are “studytonight“, “study1234tonight“, “1234“, “@#@#“, etc.

We will cover the various different ways in which we can create string in JavaScript and various operations that we can perform on JavaScript strings along with covernig some of the most common and useful String built-in functions.

The String object is a wrapper class and a member of global objects. String is the main global obejct in JavaScript used for Text Processing.

Ways to create JavaScript String

In JavaScript, basic string literals are also treated as strings and we can use the String global object’s properties and methods with string literals. So we can say that, JavaScript provides us with different ways of creating strings, which are:

  1. Using basic string literals or using String Constructor
  2. Using the String global object – Using new Keyword.

The string literals are treated as primitive string type by JavaScript and are created either using string literals or using the String constructor whereas the string created using the new Keyword is treated as String object. But JavaScript automatically converts the primitive string type to String object so that we can use the String global object properties and methods with it.

JavaScript String Using string literals

To create a string, we can use either single quote or double quote to enclose the sequence of characters. See the example below:

let str = "Studytonight";   // double quote
let newstr = 'JavaScript';   // single quote

We can also define multiline strings either using concatenation, i.e. using the + operator, or using the backslash character. Let’s see example for both.

Using String Concatenation:

let longStr = "This is a long string" +
              " which is easy to define" +
              " using string concatenation" +
              " or in simple words - joining strings";

Using backslash character:

let longStr = "This is a long string \
which is easy to define \
using backslash character \
like this";

String Literal as Template Literal:

Also, in ECMAScript2015, string literals are called Template Literals, which means we can embed expressions using ${ } syntax. Let’s take an example to see this:

let str = 'world!';

// using backticks not single quotes
document.write(`hello ${str}`);

hello world!

So these are the various ways of creating a string literal.

Creating string using String Constructor

If we have a sequence of characters or any other data type(even array) in JavaScript and we want to convert it into a string primitive type, we can use the String constructor. Following is the syntax for it:

String(anything);

Let’s take an example to understand this:

String Constructor Example /* define an array */ let arr = [1,2,3]; /* convert it into a string */ document.write(String(arr) + “
“); document.write(typeof String(arr));

In the example above, we have defined an array and then converted it into a string primitive type using the String constructor. We have also used the typeof operator to verify the data type.

Using String Object

To create a new Since object, we use the new keyword.

let obj = new String("studytonight");
document.write(typeof obj);

object

In the code example above we have created a new String object.

JavaScript String as character Array

JavaScript String is treated just like an array of characters and we can access its characters just like we access data stored in an array, using index value. Yes, each string character is provided an index value starting from 0.

let str = "StudyTonight"; 

let ch1 = str[0];   // Accessing using index
console.log(ch1);   // Output: S

S

Similarly, we can also iterate over the sequnece of characters stored in string.

JavaScript String: Iteration

Since string is sequence of characters and each character is provided an index, so we can iterate its characters using loop in JavaScript.

let str = "hello"; 

for(let ch of str)
    document.write("<br>" + ch);

h e l l o

JavaScript String Comparision

In JavaScript, we can compare string values by using comparision operators. Yes, no function is required, we can use the less than or greater than or equality operator to compare two strings in JavaScript.

let str1 = "abc";
let str2 = "abc1";

let isEqual = (str1==str2);

document.write("Are the given two strings equal: " + isEqual);

Are the given two strings equal: false

JavaScript Strings Special Characters

JavaScript Strings support quotes to be used inside of a string as long as they do not match the quotes that surrounds the string, for example: “this is a string ‘this is quote inside a string’ “ this string is valid because string is created using the double quotes and inside we have used the single quotes, but in this case, if we want to add a double quote inside the string, we will have to use an escape character.

If the same quotes are used inside and surrounding the string then the string will be chopped in half as it will consider the quote used inside the string as the ending qupte, to avoid such conditions backslash escape character (\) is used as escape character.

There are various escape notations in JavaScript:

  1. \' – To escape a single quote
  2. \" – To escape a double quote
  3. \\ – To escape a backslash itself

Then there are some special characters:

  1. \b – backspace
  2. \f – Form feed
  3. \n – Newline
  4. \r – carriage return
  5. \t – horizontal tabulator
  6. \v – vertical tabulator

Difference between String literal and String Object

Although we have explained this in the beginning itself, let’s take a few examples to see the difference between both. When we define a string literal or a String object, as mentioned above, we can use the typeof operator to find whether a given variable stores a primitive type string or a String object.

let str = "This is a string";
let strObj = new String("This is also a string");

console.log(typeof str);
console.log(typeof strObj);

string object

Also, when we use the eval() function, the primitive type is considered as source code where a String object is treated like just another objet. Let’s see an example:

let str1 = '2 + 2'              // creates a string primitive
let str2 = new String('2 + 2')  // creates a String object
console.log(eval(str1))         
console.log(eval(str2))

4 2 + 2

As you can see, the first string is evaluated as an expression, where as the String object is simply printed as it is.

So with this we have completed a basic introduction to JavaScript strings, covering primitive string type and String objects and some common operation like iteration etc. In the next tutorial we will cover the most common methods of JavaScript String type.

3 thoughts on “JavaScript Strings

  1. Pingback: JavaScript Syntax

Leave a comment