JAVASCRIPT - STRINGS

A String is a collection of letters/alphabets. It can be a word or a sentence.

The Data Type for String is str.

Declaring a String with Double Quotes ("") or Single Quotes ('')

When JavaScript finds data inside Double Quotes ("") of Single Quotes (''). It creates a String type variable for that value.

var x = "Hello World"

var x = 'Hello World'

And that's all! You have a String in place.

Example :

<html>
<body>  
<script language = "javascript" type = "text/javascript">
		
	var x = "Hello World"
	document.write(x)
    
</script>      
</body>
</html>

Output :

Hello World

Next, let us see, how can we find the length of a String.

Example :

<html>
<body>  
<script language = "javascript" type = "text/javascript"> 
		
	var x = "Hello"
	var y = x.length
	document.write("The length of the String Hello is : ",y)
    
</script>      
</body>
</html>

Output :

The length of the String Hello is : 5

So, in the above code, we have used the length with the variable x.

var y = x.length

To find the length of the String Hello.

Now, if you want to access a particular character of a String, how can you do that?

Say, you have a String "Hello". And you want the letter e to be assigned to a variable.

Let us see below.

Accessing the characters of a String

Example :

<html>
<body>  
<script language = "javascript" type = "text/javascript"> 
		
	var x = "Hello"
	var y = x[1]
	document.write(y)
    
</script>      
</body>
</html>

Output :

So, we have a string Hello,

x = "Hello"

And we have assigned Hello to a variable x.

Let us elaborate more, on how the String Hello is stored in the variable x.

You can assume the variable x is divided into 5 parts to store Hello.

Now, if you check from the front, the count starts from 0 and ends with 4.

So, if we look at the next line in the code,

var y = x[1]

We are trying to access the 2nd location,

So, x[1] is referring to the 2nd location where e is stored.

y = x[1]

And we have assigned e to the variable y.

Note : The square brackets [] are used with the string type variable to get the variable at that position(i.e. x[1] refers to the 2nd location that contains e).

Now, if you look at the document.write statement,

document.write(y)

The value of y is printed as output.

Output :

Also, remember that x[1] and x[-4] is referring to the same location that has e. You can use the negative positions or positive. That is completely upto you.

Example :

x = "Hello"
y = x[-4]
document.write(y)

Output :

Next, let us see, how can we access a portion of a String. i.e. Say you want to take ell from the String Hello and store it in a different variable.

In the above example, we have seen the + sign. And as we know, + is used for addition of two numbers.

Well! In JavaScript, + can be used to join two Strings as well.

Concatenation of Strings

Say, we have two Strings, Hello and World. And we want to join/concatenate them into one String, HelloWorld.

Let us solve it with the below example.

Example :

<html>
<body>  
<script language = "javascript" type = "text/javascript">
		
	var x = "Hello"
	var y = "World"
	var z = x + y
	document.write(z)
    
</script>      
</body>
</html>

Output :

HelloWorld

So, we have stored the String Hello in x.

var x = "Hello"

And, stored the String World in y.

var y = "World"

And used the + operator to join/concatenate Hello and World.

z = x + y

And store the concatenated value in z.

So, + is not just used to add two numbers but + is also used to join/concatenate two Strings.

We can also use the + operator to join/concatenate a number and a String.

Example :

<html>
<body>  
<script language = "javascript" type = "text/javascript">
		
	var x = 5
	var y = "World"
	var z = x + y
	document.write(z)
    
</script>      
</body>
</html>

Output :

5World

Next, let us see how to Iterate through the values of a String.

Iterate through a String

Example :

<html>
<body>  
<script language = "javascript" type = "text/javascript">
		
	var x = "Hello"
	
    for (y of x) {
		document.write(y, ", ")
	}
    
</script>      
</body>
</html>

Output :

H, e, l, l, o,

So, each Iteration of for loop,

for (y of x)

The values are taken from the variable x, one by one and put in the variable y.

And values are printed at each Iteration.

document.write(y, ", ")

Now, let us look at a scenario, where you need to find out, if a particular letter or a chunk of letters is present in the string or not.

Checking if a substring is present in a String or not using include() method

Let us check, if the substring el is present in the String Hello or not.

Example :

<html>
<body>  
<script language = "javascript" type = "text/javascript">
		
	var x = "Hello"

	if (x.includes("el")) {
		document.write("The sub-string, el is present in the String, Hello")
	}	
	else {
		document.write("The sub-string, el is not present in the String, Hello")
	}
    
</script>      
</body>
</html>

Output :

The sub-string, el is present in the String, Hello

So, to check if the substring el is present in the String Hello, we have used the if statement.

if (x.includes("el"))

And the if statement is combined with includes() method to check if the substring el is present in the String Hello or not.

Similarly, the ! keyword is used to check if the substring is not present.

Example :

<html>
<body>  
<script language = "javascript" type = "text/javascript">
		
	var x = "Hello"

	if (!x.includes("el")) {
		document.write("The sub-string, el is present in the String, Hello")
	}	
	else {
		document.write("The sub-string, el is not present in the String, Hello")
	}
    
</script>      
</body>
</html>

Output :

The sub-string, el is not present in the String, Hello

Now, if you look at the output, although the substring el is present in Hello, the output is printed from the else block.

The sub-string, el is not present in the String, Hello

String as an Object using new String()

So far we have declared a String using,

var x = "John"

A String can also be declared using new String().

var x = new String("John")

And the variable x is treated as an Object.

Next, let us look at the Methods provided by JavaScript to handle Strings more effectively.

Methods to handle Strings

You can check the individual methods by clicking on it.

Method	Description
split()	Used to split a string based on the value provided
toLowerCase()	Used to convert all the letters of a String to lower case
toUpperCase()	Used to convert all the letters of a String to upper case
replace()	Used to replace a String with some other String
indexOf()	Used to search for the substring and returns its first position
lastIndexOf()	Used to search for the substring and returns its last position
search()	Used to search for the substring and returns its first position
slice()	Used to slice a substring from the given String. Accepts negative indexes.
substring()	Also used to fetch a substring from the given String. And doesn't accept negative indexes.
substr()	Also used to fetch a substring from the given String. And doesn't accept negative indexes.
concat()	Used to join two Strings into one String
trim()	Used to remove any white space from a String
padStart()	Used to place a given character at the beginning of the String
padEnd()	Used to place a given character at the end of the String
charAt()	Used to return the letter at the given index
charCodeAt()	Used to return the ascii code of the letter at the given index
includes()	Used to search for the substring and returns true if it is present and false if not
fromCharCode()	Used to return the letter based on the ASCII code passed
repeat()	Used to repeat the String a given number of times
startsWith()	Used to check if a String begins with a particular Substring
endsWith()	Used to check if a String ends with a particular Substring

❮❮ PREV NEXT ❯❯