Javascript String Methods with example


Javascript String Methods with example

In this tutorial, you will learn the javascript string methods with examples one by one as given below

  1. length:- This property returns the length of the given string which means it counts every character of the string and returns the total number of characters of the string.

Example:-

<html>
<head>
<title>Javascript string methods</title>
</head>
<body>
	<p>Below paragraph returns the length of the given string</p>
	<p id="demo"></p>
<script>
	let text = "Helloworld";
	document.getElementById("demo").innerHTML = text.length;
</script>
</body>
</html>

Output:-

Below paragraph returns the length of the given string

10

Also read, Object in Javascript with example

slice():- This function extracts some part of the given string and returns the extracted string. This string method takes two parameters as the start position index and the end position index. Please note that the start position index starts from zero and the end position index can not take place in the extracted string.

Example:-

<html>
<head>
<title>Javascript string methods</title>
</head>
<body>
	<p>Below paragraph extracts a part of the string and returns the extracted string</p>
	<p id="demo1"></p>
<script>
	let text = "Helloworld";
	document.getElementById("demo1").innerHTML = text.slice(0,5);
</script>
</body>
</html>

Output:-

Below paragraph extracts a part of the string and returns the extracted string

Hello

substring():- This function is also as same as the slice() function and returns the extracted string from the given string.

Example:-

<html>
<head>
<title>Javascript string methods</title>
</head>
<body>
	<p>Below paragraph extracts a part of the string and returns the extracted string</p>
	<p id="demo2"></p>
<script>
	let text = "Helloworld";
	document.getElementById("demo2").innerHTML = text.substring(0,5);
</script>

</body>
</html>

Output:-

Below paragraph extracts a part of the string and returns the extracted string

Hello

substr( ):- This function is also similar to the substring() function and takes exactly two parameters and returns the extracted string from the given string.

Example:-

<html>
<head>
<title>Javascript string methods</title>
</head>
<body>
	<p>Below paragraph extracts a part of the string and returns the extracted string</p>
	<p id="demo3"></p>
<script>
	let text = "Helloworld";
	document.getElementById("demo3").innerHTML = text.substr(0,5);
</script>
</body>
</html>

Output:-

Below paragraph extracts a part of the string and returns the extracted string

Hello

replace():- This function replaces some part of the string with a new string inside the given string. This function takes exactly two parameters as given below

  • The first parameter defines the text to be replaced
  • The second parameter defines the replaced text

Example:-

<html>
<head>
<title>Javascript string methods</title>
</head>
<body>
	<p>Below paragraph replaces a part of the string with a new string</p>
	<p id="demo4"></p>
<script>
	let text = "Helloworld";
	document.getElementById("demo4").innerHTML = text.replace("world","India");
</script>
</body>
</html>

Output:-

Below paragraph replaces a part of the string with a new string

HelloIndia

replace( ) with g:- This function replaces all the matching parts of the given string with a new string. This function takes exactly two parameters as given below

  • The first parameter defines all the matching text to be replaced.
  • The second parameter defines the replaced text.

Example:-

<html>
<head>
<title>Javascript string methods</title>
</head>
<body>
	<p>Below paragraph replaces all the matching parts of the string with a new string</p>
	<p id="demo5"></p>
<script>
	let string = "If you want to visit Inida then you should visit the capital of India";
	document.getElementById("demo5").innerHTML = string.replace(/you/g,"I");
</script>
</body>
</html>

Output:-

Below paragraph replaces all the matching parts of the string with a new string

If I want to visit India then I should visit the capital of India

toUpperCase( ):- This function converts all the characters of the given string into uppercase. This function does not require any parameter.

Example:-

<html>
<head>
<title>Javascript string methods</title>
</head>
<body>
	<p>Below paragraph makes the given string in uppercase.</p>
	<p id="demo6"></p>
<script>
	let string = "If you want to visit Inida then you should visit the capital of India";
	document.getElementById("demo6").innerHTML = string.toUpperCase();
</script>
</body>
</html>

Output:-

Below paragraph makes the given string in uppercase.

IF YOU WANT TO VISIT INIDA THEN YOU SHOULD VISIT THE CAPITAL OF INDIA

toLowerCase():- This function converts all the characters of the given string into lowercase. This function also does not require any parameter.

Example:-

<html>
<head>
<title>Javascript string methods</title>
</head>
<body>
    <p>Below paragraph makes the given string in lowercase.</p>
	<p id="demo7"></p>
<script>
	let string = "If you want to visit Inida then you should visit the capital of India";
	document.getElementById("demo7").innerHTML = string.toLowerCase();
</script>
</body>
</html>

Output:-

Below paragraph makes the given string in lowercase.

if you want to visit inida then you should visit the capital of india

trim( ):- This function removes or eliminates all the whitespaces found in the given string.

Example:-

<html>
<head>
<title>Javascript string methods</title>
</head>
<body>
    <p>Below paragraph removes whitespaces from the both side of a string</p>
	<p id="demo9"></p>
<script>
	let trimstring = "Helloworld";
	document.getElementById("demo9").innerHTML = trimstring.trim();
</script>
</body>
</html>

Output:-

Below paragraph removes whitespaces from the both side of a string

Helloworld

charAt():- This function will return the searched character from the given string. Suppose we want to search for a particular character from the given string then this function will help us to find that character in the given string. It starts counting the character from position zero.

Example:-

<html>
<head>
<title>Javascript string methods</title>
</head>
<body>
	<p>Below paragraph will diplay the searched character from a string</p>
	<p id="demo10"></p>
<script>
	let text = "Helloworld";
    document.getElementById("demo10").innerHTML = text.charAt(5);
</script>
</body>
</html>

Output:-

Below paragraph will diplay the searched character from a string

w

charCodeAt():- This function will return the Unicode number of characters from the given string.

Example:-

<html>
<head>
<title>Javascript string methods</title>
</head>
<body>
	<p>Below paragraph will diplay the unicode character from a string</p>
	<p id="demo11"></p>
<script>
	let text = "Helloworld";
	document.getElementById("demo11").innerHTML = text.charCodeAt(5);
</script>
</body>
</html>

Output:-

Below paragraph will diplay the unicode character from a string

119

padStart():- This function appends a new string at the start of the given string. This function takes exactly two parameters as given below

  • The first parameter defines the number of times the new string is to be added
  • The second parameter defines the new string.

Example:-

<html>
<head>
<title>Javascript string methods</title>
</head>
<body>
    <p>Below paragraph will pads a string  at the start with another string</p>
	<p id="demo12"></p>
<script>
	let padstring = 3;
	let padnumberstring  = padstring.toString();
	document.getElementById("demo12").innerHTML = padnumberstring.padStart(5,'y');
</script>
</body>
</html>

Output:-

Below paragraph will pads a string at the start with another string

yyyy3

padEnd():- This function appends a new string at the end of the given string. This function takes exactly two parameters as given below

  • The first parameter defines the number of times the new string is to be added.
  • The second parameter defines the new string.

Note:- If the given string is a number then you should convert it to a string first using the toString() function in both the padStart() and padEnd() methods.

Example:-

<html>
<head>
<title>Javascript string methods</title>
</head>
<body>
	<p>Below paragraph will pads a string  at the end with another string</p>
	<p id="demo13"></p>
<script>
	let padstring = 3;
	let padnumberstring  = padstring.toString();
	document.getElementById("demo13").innerHTML = padnumberstring.padEnd(5,'y');
</script>
</body>
</html>

Output:-

Below paragraph will pad a string at the end with another string

3yyyy

concat():- This method appends a new string with the given string.

Example:-

<html>
<head>
<title>Javascript string methods</title>
</head>
<body>
	<p>Below paragraph will join two strings together</p>
	<p id="demo14"></p>
<script>
	let text1 = "Hello";
	let text2 = "World";
    document.getElementById("demo14").innerHTML = text1.concat(" ",text2);
</script>
</body>
</html>

Output:-

Below paragraph will join two strings together

Hello World

Conclusion: I Hope this tutorial will help you to understand the concept of javascript string methods. If there is any doubt then please leave a comment below.


Leave a Comment