JavaScript String



String object is used to process existing character blocks.


JavaScript String

A string is used to store a sequence of characters like "John Doe".

A string can use single quotes or double quotes :

Instance

var carname="Volvo XC60";
var carname='Volvo XC60';

You can access any character in the string using position (index):

Example

var character= carname[7];

The index of the string starts from zero, so the first character of the string is [0], the second character is [1], and so on.

You can use quotation marks in strings, as shown below:

Example

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

Or you can use escape characters in the string using quotes:

Instance

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<script>
var carname1="Volvo XC60";
var carname2='Volvo XC60';
var answer1="It's alright";
var answer2="He is called 'Johnny'";
var answer3='He is called "Johnny"';
document.write(carname1 + "<br>")
document.write(carname2 + "<br>")
document.write(answer1 + "<br>")
document.write(answer2 + "<br>")
document.write(answer3 + "<br>")
</script>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance


String

String uses the length attribute length to calculate the length of the string:

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>

<script>
var txt = "Hello World!";
document.write("<p>" + txt.length + "</p>");
var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.write("<p>" + txt.length + "</p>");
</script>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance


Find the string in the string

Strings use indexOf() to locate the first occurrence of a specified character in the string:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="p1">Click the button to locate where "locate" first occurs.</p>
<p id="p2">0</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var str=document.getElementById("p1").innerHTML;
	var n=str.indexOf("locate");
	document.getElementById("p2").innerHTML=n+1;
}
</script>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

If the corresponding character function is not found, the function returns -1

lastIndexOf() method in the string Find the occurrence of the string starting from the end.


Content matching

match()The function is used to find a specific character in a string, and if found, returns the character.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<script>
var str="Hello world!";
document.write(str.match("world") + "<br>");
document.write(str.match("World") + "<br>");
document.write(str.match("world!"));
</script>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance


Replace content

replace() method replaces some characters with other characters in a string.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>替换 "Microsoft" 为 "php.cn" :</p>
<button onclick="myFunction()">点我</button>
<p id="demo">请访问 Microsoft!</p>
<script>
function myFunction() {
    var str = document.getElementById("demo").innerHTML; 
    var txt = str.replace("Microsoft","php.cn");
    document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>

Run instance »

Click the "Run instance" button to view the online instance


String case conversion

String case conversion uses the functiontoUpperCase() / toLowerCase():

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<script>
var txt="Hello World!";
document.write("<p>" + txt.toUpperCase() + "</p>");
document.write("<p>" + txt.toLowerCase() + "</p>");
document.write("<p>" + txt + "</p>");
</script>
<p>该方法返回一个新的字符串,源字符串没有被改变。</p>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance


Convert string to array

Use strong>split() function to convert string to array:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮显示数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var str="a,b,c,d,e,f";
	var n=str.split(",");
	document.getElementById("demo").innerHTML=n[0];
}
</script>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance


Special characters

You can use the backslash (\) to insert special characters in Javascript Symbols, such as apostrophes, quotation marks and other special symbols.

View the following JavaScript code:

var txt="We are the so-called "Vikings" from the north.";
document.write(txt);

In JavaScript, strings start and stop using single or double quotes. This means that the above string will be cut into: We are the so-called

To solve the above problem, you can use backslashes to escape the quotes:

var txt ="We are the so-called \"Vikings\" from the north.";
document.write(txt);

JavaScript will output the correct text string: We are the so-called "Vikings" from the north.

The following table lists other special characters. You can use backslashes to escape special characters:

##\\ Slant bar\nLine break\rEnter\ttab\ bSpace##\f
Code Output
\'Single quotes
\"Double Quotation marks
Page feed

characters String properties and methods

Properties:

    length
  • prototype
  • constructor
  • Method:

    charAt()
  • charCodeAt()
  • concat()
  • ##fromCharCode()
  • indexOf()
  • lastIndexOf()
  • match()
  • replace()
  • ##search()

  • slice()

  • split()

  • substr()

  • substring()

  • ##toLowerCase()

  • toUpperCase()

  • valueOf()