1.说明：

字符串运算符也即 “+”运算符，这个运算符对于数值型数据而言是“加”的含义，而对于字符串数据类型而言则用于将 “ 文本值或字符串变量 ”连接起来。

例如：str1="13"，str2="14"，则 "str3=str1 + str2" 运算结果为 1314 。

简单的说：字符串运算符为 + ，用于连接字符串变量，而不是求和。

2.实例

（1）连接两字符串。

例如： str1="Have a"，str2=" good time！"，求 str3=str1 + str2 。

<!DOCTYPE html>
<html>
<head>
<title>字符串连接实例</title>
<script language="javascript">
function myFunction(){ //定义函数var str1="Have a ";//字符串变量1var str2="good time.";//字符串变量2var str3=str1+str2;//字符串变量3document.getElementById("demo").innerHTML=str3;//输出str3
}
</script>
</head>
<body>
<button onclick="myFunction()">鼠标点击我查看结果</button>
<p id="demo"></p>
</body>
</html>

（2）字符串和数字进行加法运算。

求： x=5+5，y="5"+5，z="Hi"+5。

<!DOCTYPE html>
<html>
<head>
<title>字符串连接实例</title>
<script language="javascript">
function myFunction(){ //定义函数var x=5+5;//x，两整数5var y="5"+5;//y，字符串5 和 数值5var z="Hi"+5;//z，字符串 和 数值5//输出结果document.getElementById("demo").innerHTML="x=5+5值为：" + x + "<br>" + "y=\"5\"+5值为：" + y + "<br>" + "\"Hi\"+5值为：" + z;
}
</script>
</head>
<body>
<button onclick="myFunction()">鼠标点击我查看结果</button>
<p id="demo"></p>
</body>
</html>

（3）注意

一般情况下对字符串进行乘法运算是不和法的，例如：“a” * “b” 是错误的。

但是特殊情况下，对数值型的字符串值乘法是可以的，例如：“2” * “3” 是合法的，JavaScript 会将字符串转换成数字进行计算，返回数字6,。如下所示。

<!DOCTYPE html>
<html>
<head>
<title>字符串连接实例</title>
<script language="javascript">
function myFunction(){ //定义函数var x="2";//字符串var y="3";//字符串var z=x*y;//求乘积//输出结果document.getElementById("demo").innerHTML="\"2\"  *  \"3\" 的值为：" + z;
}
</script>
</head>
<body>
<button onclick="myFunction()">鼠标点击我查看结果</button>
<p id="demo"></p>
</body>
</html>

详解JavaScript运算符(二)：字符串运算符相关推荐

详解JavaScript运算符(一)：赋值、算术、复合运算符
JavaScript运算符分别为: 赋值运算符.算术运算符.字符串运算符.逻辑运算符.关系运算符.位运算符,其中赋值运算符和算法运算符结合到一起组成复合运算符. 1.赋值运算符赋值运算符只有一个:即 ...
es6字符串添加html标签,JavaScript_详解JavaScript ES6中的模板字符串，在 ES6 中引入了一种新的字符 - phpStudy...
详解JavaScript ES6中的模板字符串在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别.在最简单的情况下,他们就是 ...
js模板字符串自定义类名_详解JavaScript ES6中的模板字符串
这篇文章主要介绍了详解JavaScript ES6中的模板字符串,JS的ES6版本带来诸多简洁化方面的重大改进,需要的朋友可以参考下在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用 ...
《 Python List列表全实例详解系列（二）》__创建列表（5种方式）
< Python List列表全实例详解系列(二)> __创建列表(5种方式) 上一篇:< Python List 列表全实例详解系列(一)>__系列总目录.列表概念本章目录 ...
window 程序报错自动重启_好程序员web前端教程之详解JavaScript严格模式
好程序员web前端教程之详解JavaScript严格模式,严格模式(Strict mode)是由ECMA-262规范定义的新兴JavaScript标准,发布于2009年12月第五版.旨在改善错误检查功 ...
详解Javascript本地存储的方式、区别及应用场景
详解Javascript本地存储的方式.区别及应用场景一.方式 javaScript本地缓存的方法我们主要讲述以下四种: cookie sessionStorage localStorage ind ...
CMake手册详解（十二）
2019独角兽企业重金招聘Python工程师标准>>> SirDigit CMake手册详解 (十二) CMD#30:find_library查找一个库文件 find_library ...
shell脚本详解（十二）——Here Document免交互及Expect自动化交互
shell脚本详解(十二)--Here Document免交互及Expect自动化交互一.Here Document 免交互 1.格式 2.注意事项 3.免交互方式实现对行数的统计,将要统计的内容置 ...
详解 javascript中offsetleft属性的用法（转）
详解 javascript中offsetleft属性的用法转载 2015-11-11 投稿:mrr 我要评论本章节通过代码实例介绍一下offsetleft属性的用法,需要的朋友可以做一 ...
详解JavaScript变量类型判断及domReady原理写得很好
原文:详解JavaScript变量类型判断及domReady原理我们知道,在开发JavaScript时候,经常要判断JavaScript变量类型,此 JavaScript教程详细介绍JS变量的判断 ...

详解JavaScript运算符(二)：字符串运算符