JavaScript Strings

by

The JavaScript string is an object that represents a sequence of characters.

There are 2 ways to create string in JavaScript

  1. By string literal
  2. By string object (using new keyword)
Contents hide
1 By string literal
2 By string object (using new keyword)
3 JavaScript String Methods
4 JavaScript String charAt(index) Method
5 JavaScript String concat(str) Method
6 JavaScript String indexOf(str) Method
7 JavaScript String lastIndexOf(str) Method
8 JavaScript String toLowerCase() Method
9 JavaScript String toUpperCase() Method
10 JavaScript String slice(beginIndex, endIndex) Method
11 JavaScript String trim() Method
11.1 JavaScript String split() Method
11.2 Related posts:

By string literal

The string literal is created using double quotes. The syntax of creating string using string literal is given below:

var stringname=“string value”;

Let’s see the simple example of creating string literal.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
 
<head>
<title>
JavaScript Strings
</title>
</head>
 
<body>
<h1>MyWebCode</h1>
<h2>JavaScript Strings</h2>
<p id="MWC"></p>
<!-- Script to store string in variable -->
<script>
// String written inside quotes
var x = "Welcome to MyWebCode!";
document.getElementById("MWC").innerHTML = x;
</script>
</body>
 
</html>

Output:

By string object (using new keyword)

The syntax of creating string object using new keyword is given below:

var stringname=new String(“string literal”);

Here, new keyword is used to create instance of string.

Let’s see the example of creating string in JavaScript by new keyword.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<title>By string object (using new keyword)</title>
</head>
<body>
<h2>By string object (using new keyword)</h2>
<p id="MWC"></p>
<script>  
var x=new String("hello javascript string");  
document.getElementById("MWC").innerHTML = x;
</script>
</body>
</html>

Output:

JavaScript String Methods

Let’s see the list of JavaScript string methods with examples.

Methods Description
charAt() It provides the char value present at the specified index.
charCodeAt() It provides the Unicode value of a character present at the specified index.
concat() It provides a combination of two or more strings.
indexOf() It provides the position of a char value present in the given string.
lastIndexOf() It provides the position of a char value present in the given string by searching a character from the last position.
search() It searches a specified regular expression in a given string and returns its position if a match occurs.
match() It searches a specified regular expression in a given string and returns that regular expression if a match occurs.
replace() It replaces a given string with the specified replacement.
substr() It is used to fetch the part of the given string on the basis of the specified starting position and length.
substring() It is used to fetch the part of the given string on the basis of the specified index.
slice() It is used to fetch the part of the given string. It allows us to assign positive as well negative index.
toLowerCase() It converts the given string into lowercase letter.
toLocaleLowerCase() It converts the given string into lowercase letter on the basis of host?s current locale.
toUpperCase() It converts the given string into uppercase letter.
toLocaleUpperCase() It converts the given string into uppercase letter on the basis of host?s current locale.
toString() It provides a string representing the particular object.
valueOf() It provides the primitive value of string object.
split() It splits a string into substring array, then returns that newly created array.
trim() It trims the white space from the left and right side of the string.

JavaScript String charAt(index) Method

The JavaScript String charAt() method returns the character at the given index.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<title>JavaScript String charAt(index) Method</title>
</head>
<body>
<h2>JavaScript String charAt(index) Method</h2>
<p id="MWC"></p>
<script>  
var x="javascript";
document.getElementById("MWC").innerHTML = x.charAt(2);
</script>
</body>
</html>

Output:

JavaScript String concat(str) Method

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<title>JavaScript String concat(str) Method</title>
</head>
<body>
<h2>JavaScript String concat(str) Method</h2>
<p id="MWC"></p>
<script>  
var x="MyWebCode";
var y=" - Howto Guides & Software Tutorials";
var z=x+y;  
document.getElementById("MWC").innerHTML = z;
</script>
</body>
</html>

Output:

JavaScript String indexOf(str) Method

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<title>JavaScript String concat(str) Method</title>
</head>
<body>
<h2>JavaScript String concat(str) Method</h2>
<p id="MWC"></p>
<script>  
var x="MyWebCode Howto Guides & Software Tutorials";
var y=x.indexOf("Howto");  
document.getElementById("MWC").innerHTML = y;
</script>
</body>
</html>

Output:

JavaScript String lastIndexOf(str) Method

The JavaScript String lastIndexOf(str) method returns the last index position of the given string.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<title>JavaScript String lastIndexOf(str) Method</title>
</head>
<body>
<h2>JavaScript String lastIndexOf(str) Method</h2>
<p id="MWC"></p>
<script>  
var x="javascript from mywebcode indexof";
var y=x.lastIndexOf("myweb");
document.getElementById("MWC").innerHTML = y;
</script>
</body>
</html>

Output:

JavaScript String toLowerCase() Method

The JavaScript String toLowerCase() method returns the given string in lowercase letters.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<title>JavaScript String toLowerCase() Method</title>
</head>
<body>
<h2>JavaScript String toLowerCase() Method</h2>
<p id="MWC"></p>
<script>  
var x="JavaScript from MYWEBCODE indexof";
var y=x.toLowerCase();
document.getElementById("MWC").innerHTML = y;
</script>
</body>
</html>

Output:

JavaScript String toUpperCase() Method

The JavaScript String toUpperCase() method returns the given string in uppercase letters.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<title>JavaScript String toUpperCase() Method</title>
</head>
<body>
<h2>JavaScript String toUpperCase() Method</h2>
<p id="MWC"></p>
<script>  
var x="JavaScript from mywebcode toLowerCase";
var y=x.toUpperCase();
document.getElementById("MWC").innerHTML = y;
</script>
</body>
</html>

JavaScript String slice(beginIndex, endIndex) Method

The JavaScript String slice(beginIndex, endIndex) method returns the parts of string from given beginIndex to endIndex. In slice() method, beginIndex is inclusive and endIndex is exclusive.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<title>JavaScript String slice(beginIndex, endIndex) Method</title>
</head>
<body>
<h2>JavaScript String slice(beginIndex, endIndex) Method</h2>
<p id="MWC"></p>
<script>  
var x="mywebcode";
var y=x.slice(2,6);
document.getElementById("MWC").innerHTML = y;
</script>
</body>
</html>

JavaScript String trim() Method

The JavaScript String trim() method removes leading and trailing whitespaces from the string.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<title>JavaScript String trim() Method</title>
</head>
<body>
<h2>JavaScript String trim() Method</h2>
<p id="MWC"></p>
<script>  
var x="     Mywebcode trim    ";
var y=x.trim();
document.getElementById("MWC").innerHTML = y;
</script>
</body>
</html>

Output:

JavaScript String split() Method

It splits a string into substring array, then returns that newly created array.

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<title>JavaScript String split() Method</title>
</head>
<body>
<h2>JavaScript String split() Method</h2>
<p id="MWC"></p>
<script>  
var x="Howto Guides & Software Tutorials";
document.getElementById("MWC").innerHTML = x.split(" ");
</script>
</body>

Output:

 

Related posts:

  1. What is JavaScript and Why Learn JavaScript Programming language?
  2. Adding JavaScript to HTML Document
  3. Understanding the JavaScript Syntax
  4. JavaScript Variables
  5. JavaScript Output
  6. Javascript Data Types
  7. JavaScript Operators
  8. JavaScript Events
  9. JavaScript Numbers
Share on:

Recommended Articles...

Hello, I am Dharmendra Yadav and I am a Python Developer with experience in web development using Django, Flask, REST API, SQL, MySQL, HTML, CSS, JavaScript, WordPress, Oracle Cloud, AWS and Git. I also write technical articles where I explain web development and Software Engineering.

...

Leave a Comment