手册

目录

JavaScript String

收藏700

阅读92889

更新时间2022-04-15


String 对象用于处理已有的字符块。


JavaScript 字符串

一个字符串用于存储一系列字符就像 "John Doe".

一个字符串可以使用单引号或双引号:

实例

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

你使用位置(索引)可以访问字符串中任何的字符:

实例

var character=carname[7];

字符串的索引从零开始, 所以字符串第一字符为 [0],第二个字符为 [1], 等等。

你可以在字符串中使用引号,如下实例:

实例

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

或者你可以在字符串中使用转义字符使用引号:

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例


字符串(String)

字符串(String)使用长度属性length来计算字符串的长度:

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例


在字符串中查找字符串

字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置:

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

如果没找到对应的字符函数返回-1

lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置。


内容匹配

match()函数用来查找字符串中特定的字符,并且如果找到的话,则返回这个字符。

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例


替换内容

replace() 方法在字符串中用某些字符替换另一些字符。

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例


字符串大小写转换

字符串大小写转换使用函数 toUpperCase() / toLowerCase():

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例


字符串转为数组

字符串使用strong>split()函数转为数组:

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例


特殊字符

Javascript 中可以使用反斜线(\)插入特殊符号,如:撇号,引号等其他特殊符号。

查看如下 JavaScript 代码:

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

在JavaScript中,字符串的开始和停止使用单引号或双引号。这意味着,上面的字符串将被切成: We are the so-called

解决以上的问题可以使用反斜线来转义引号:

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

JavaScript将输出正确的文本字符串:We are the so-called "Vikings" from the north.

下表列出其他特殊字符,可以使用反斜线转义特殊字符:

代码输出
\'单引号
\"双引号
\\斜杆
\n换行
\r回车
\ttab
\b空格
\f换页


字符串属性和方法

属性:

  • length

  • prototype

  • constructor

方法:

  • charAt()

  • charCodeAt()

  • concat()

  • fromCharCode()

  • indexOf()

  • lastIndexOf()

  • match()

  • replace()

  • search()

  • slice()

  • split()

  • substr()

  • substring()

  • toLowerCase()

  • toUpperCase()

  • valueOf()

相关

视频

RELATED VIDEOS

更多

免费

Web前端开发极速入门
初级 Web前端开发极速入门

219920次学习

收藏

免费

前端入门_HTML5
初级 前端入门_HTML5

616946次学习

收藏

免费

30分钟学会网站布局
初级 30分钟学会网站布局

238440次学习

收藏

免费

CSS视频教程-玉女心经版
初级 CSS视频教程-玉女心经版

393054次学习

收藏

免费

独孤九贱(1)_HTML5视频教程

免费

独孤九贱(6)_jQuery视频教程

免费

独孤九贱(7)_Bootstrap视频教程

免费

独孤九贱(2)_CSS视频教程
初级 独孤九贱(2)_CSS视频教程

229605次学习

收藏

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

61.7万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.3万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

70.9万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.6万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

33.9万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125万人学习

关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号