JavaScript 是属于HTML和Web的编程语言。
为何要学习JavaScript?
JavaScript是web开发者必学的三种语言之一:
- HTML 定义网页的内容
- CSS 规定网页的布局
- JavaScript 对网页行为进行编程
您知道吗?
JavaScript 和 Java 是完全不同的语言,不论是概念还是设计。
JavaScript 在 1995 年由 Brendan Eich 发明,并于 1997 年成为一部 ECMA 标准。
ECMA-262 是其官方名称。ECMAScript 6 (发布于 2015 年)是最新的 JavaScript 版本。
JavaScript 简介
JavaScript 能够改变 HTML 内容
getElementById() 是多个 JavaScript HTML 方法之一。
本例使用该方法来“查找” id="demo" 的 HTML 元素,并把元素内容(innerHTML)更改为 "Hello JavaScript":
提示:JavaScript 同时接受双引号和单引号:
document.getElementById("demo").innerHTML = "Hello JavaScript";
提示:JavaScript 同时接受双引号和单引号:
document.getElementById("demo").innerHTML = 'Hello JavaScript';
JavaScript 能够改变 HTML 属性
本例通过改变 <img> 标签的 src 属性(source)来改变一张 HTML 图像:
JavaScript 能够改变 HTML 样式 (CSS)
改变 HTML 元素的样式,是改变 HTML 属性的一种变种:
JavaScript 能够隐藏 HTML 元素
可通过改变 display 样式来隐藏 HTML 元素:
JavaScript 能够显示 HTML 元素
可通过改变 display 样式来显示隐藏的 HTML 元素:
JavaScript 使用
<script> 标签
在 HTML 中,JavaScript 代码必须位于 <script> 与 </script> 标签之间。
注释:旧的 JavaScript 例子也许会使用 type 属性:<script type="text/javascript">。
注释:type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。
JavaScript 函数和事件
JavaScript 函数是一种 JavaScript 代码块,它可以在调用时被执行。
例如,当发生事件时调用函数,比如当用户点击按钮时。
提示:您将在稍后的章节学到更多有关函数和事件的知识。
<head> 或 <body> 中的 JavaScript
您能够在 HTML 文档中放置任意数量的脚本。
脚本可被放置与 HTML 页面的 <body> 或 <head> 部分中,或兼而有之。
<head> 中的 JavaScript
在本例中,JavaScript 函数被放置于 HTML 页面的 <head> 部分。
该函数会在按钮被点击时调用:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>
<body>
<h1>一张网页</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>
</body>
</html>
<body> 中的 JavaScript
在本例中,JavaScript 函数被放置于 HTML 页面的 <body> 部分。
该函数会在按钮被点击时调用:
<!DOCTYPE html>
<html>
<body>
<h1>A Web Page</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</body>
</html>
提示:把脚本置于 <body> 元素的底部,可改善显示速度,因为脚本编译会拖慢显示。
外部脚本
脚本可放置与外部文件中:
外部文件:myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
外部脚本很实用,如果相同的脚本被用于许多不同的网页。
JavaScript 文件的文件扩展名是 .js。
如需使用外部脚本,请在 <script> 标签的 src (source) 属性中设置脚本的名称:
<script src="myScript.js"></script>
您可以在 <head> 或 <body> 中放置外部脚本引用。
该脚本的表现与它被置于 <script> 标签中是一样的。
注释:外部脚本不能包含 <script> 标签。
外部 JavaScript 的优势
在外部文件中放置脚本有如下优势:
- 分离了 HTML 和代码
- 使 HTML 和 JavaScript 更易于阅读和维护
- 已缓存的 JavaScript 文件可加速页面加载
如需向一张页面添加多个脚本文件 - 请使用多个 script 标签:
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
外部引用
可通过完整的 URL 或相对于当前网页的路径引用外部脚本:
本例使用完整的 URL 来链接至脚本:
<script src="https://www.w3school.com.cn/js/myScript1.js"></script>
本例使用了位于当前网站上指定文件夹中的脚本:
<script src="/js/myScript1.js"></script>
本例链接了与当前页面相同文件夹的脚本:
<script src="myScript1.js"></script>
JavaScript 输出
JavaScript 不提供任何内建的打印或显示函数。
JavaScript 显示方案
JavaScript 能够以不同方式“显示”数据:
- 使用 window.alert() 写入警告框
- 使用 document.write() 写入 HTML 输出
- 使用 innerHTML 写入 HTML 元素
- 使用 console.log() 写入浏览器控制台
使用 innerHTML
如需访问 HTML 元素,JavaScript 可使用 document.getElementById(id) 方法。
id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容:
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
提示:更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。
使用 document.write()
出于测试目的,使用 document.write() 比较方便:
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
注意:在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML :
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<button onclick="document.write(5 + 6)">试一试</button>
</body>
</html>
提示:document.write() 方法仅用于测试。
使用 window.alert()
您能够使用警告框来显示数据:
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
使用 console.log()
在浏览器中,您可使用 console.log() 方法来显示数据。
请通过 F12 来激活浏览器控制台,并在菜单中选择“控制台”。
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>
JavaScript 语句
在 HTML 中,JavaScript 语句是由 web 浏览器“执行”的“指令”。
var x, y, z; // 语句 1
x = 22; // 语句 2
y = 11; // 语句 3
z = x + y; // 语句 4
JavaScript 程序
计算机程序是由计算机“执行”的一系列“指令”。
在编程语言中,这些编程指令被称为语句。
JavaScript 程序就是一系列的编程语句。
注释:在 HTML 中,JavaScript 程序由 web 浏览器执行。
JavaScript 语句
JavaScript 语句由以下构成:
值、运算符、表达式、关键词和注释。
这条语句告诉浏览器在 id="demo" 的 HTML 元素中输出 "Hello Kitty.":
document.getElementById("demo").innerHTML = "Hello Kitty.";
大多数 JavaScript 程序都包含许多 JavaScript 语句。
这些语句会按照它们被编写的顺序逐一执行。
注释:JavaScript 程序(以及 JavaScript 语句)常被称为 JavaScript 代码。
分号 ;
分号分隔 JavaScript 语句。
请在每条可执行的语句之后添加分号:
a = 5;
b = 6;
c = a + b;
如果有分号分隔,允许在同一行写多条语句:
a = 5; b = 6; c = a + b;
您可能在网上看到不带分号的例子。
提示:以分号结束语句不是必需的,但我们仍然强烈建议您这么做。
JavaScript 空白字符
JavaScript 会忽略多个空格。您可以向脚本添加空格,以增强可读性。
下面这两行是相等的:
var person = "Bill";
var person="Bill";
在运算符旁边( = + - * / )添加空格是个好习惯:
var x = y + z;
JavaScript 行长度和折行
为了达到最佳的可读性,程序员们常常喜欢把代码行控制在 80 个字符以内。
如果 JavaScript 语句太长,对其进行折行的最佳位置是某个运算符:
document.getElementById("demo").innerHTML =
"Hello Kitty.";
JavaScript 代码块
JavaScript 语句可以用花括号({...})组合在代码块中。
代码块的作用是定义一同执行的语句。
您会在 JavaScript 中看到成块组合在一起的语句:
function myFunction() {
document.getElementById("demo").innerHTML = "Hello Kitty.";
document.getElementById("myDIV").innerHTML = "How are you?";
}
JavaScript 关键词
JavaScript 语句常常通过某个关键词来标识需要执行的 JavaScript 动作。
下面的表格列出了一部分将在教程中学到的关键词:
关键词 | 描述 |
---|---|
break | 终止 switch 或循环。 |
continue | 跳出循环并在顶端开始。 |
debugger | 停止执行 JavaScript,并调用调试函数(如果可用)。 |
do ... while | 执行语句块,并在条件为真时重复代码块。 |
for | 标记需被执行的语句块,只要条件为真。 |
function | 声明函数。 |
if ... else | 标记需被执行的语句块,根据某个条件。 |
return | 退出函数。 |
switch | 标记需被执行的语句块,根据不同的情况。 |
try ... catch | 对语句块实现错误处理。 |
var | 声明变量。 |
注释:JavaScript 关键词指的是保留的单词。保留词无法用作变量名。
JavaScript 语法
JavaScript 语法是一套规则,它定义了 JavaScript 的语言结构。
var x, y; // 如何声明变量
x = 7; y = 8; // 如何赋值
z = x + y; // 如何计算值
JavaScript 值
JavaScript 语句定义两种类型的值:混合值和变量值。
混合值被称为字面量(literal)。变量值被称为变量。
JavaScript 字面量
书写混合值最重要的规则是:
写数值有无小数点均可:
15.90
10011
字符串是文本,由双引号或单引号包围:
"Bill Gates"
'Bill Gates'
JavaScript 变量
在编程语言中,变量用于存储数据值。
JavaScript 使用 var 关键词来声明变量。
= 号用于为变量赋值。
在本例中,x 被定义为变量。然后,x 被赋的值是 7:
var x;
x = 7;
JavaScript 运算符
JavaScript 使用算数运算符(+ - * /)来计算值:
(7 + 8) * 10
JavaScript 使用赋值运算符(=)向变量赋值:
var x, y;
var x = 7;
var y = 8;
JavaScript 表达式
表达式是值、变量和运算符的组合,计算结果是值。
6 * 10
表达式也可包含变量值:
x * 10
值可以是多种类型,比如数值和字符串。
例如,"Bill" + " " + "Gates",计算为 "Bill Gates":
"Bill" + " " + "Gates"
JavaScript 关键词
JavaScript 关键词用于标识被执行的动作。
var 关键词告知浏览器创建新的变量:
var x = 7 + 8;
var y = x * 10;
JavaScript 注释
并非所有 JavaScript 语句都被“执行”。
双斜杠 // 或 /* 与 */ 之间的代码被视为注释。
注释会被忽略,不会被执行:
var x = 7; // 会执行
// var x = 8; 不会执行
JavaScript 标识符
标识符是名称。
在 JavaScript 中,标识符用于命名变量(以及关键词、函数和标签)。
在大多数编程语言中,合法名称的规则大多相同。
在 JavaScript 中,首字符必须是字母、下划线(-)或美元符号($)。
连串的字符可以是字母、数字、下划线或美元符号。
提示:数值不可以作为首字符。这样,JavaScript 就能轻松区分标识符和数值。
JavaScript 对大小写敏感
所有 JavaScript 标识符对大小写敏感。
变量 lastName 和 lastname,是两个不同的变量。
lastName = "Gates";
lastname = "Jobs";
JavaScript 不会把 VAR 或 Var 译作关键词 var。
JavaScript 与驼峰式大小写
历史上,程序员曾使用三种把多个单词连接为一个变量名的方法:
连字符:
first-name, last-name, master-card, inter-city.
注释:JavaScript 中不能使用连字符。它是为减法预留的。
下划线:
first_name, last_name, master_card, inter_city.
驼峰式大小写(Camel Case):
FirstName, LastName, MasterCard, InterCity.
JavaScript 程序员倾向于使用以小写字母开头的驼峰大小写:
firstName, lastName, masterCard, interCity
JavaScript 字符集
JavaScript 使用 Unicode 字符集。
Unicode 覆盖世界上几乎所有的字符、标点和符号。
JavaScript 注释
JavaScript 注释用于解释 JavaScript 代码,增强其可读性。
JavaScript 注释也可以用于在测试替代代码时阻止执行。
单行注释
单行注释以 // 开头。
任何位于 // 与行末之间的文本都会被 JavaScript 忽略(不会执行)。
本例在每条代码行之前使用单行注释:
// 改变标题:
document.getElementById("myH").innerHTML = "我的第一张页面";
// 改变段落:
document.getElementById("myP").innerHTML = "我的第一个段落。";
本例在每行结尾处使用了单行注释来解释代码:
var x = 5; // 声明 x,为其赋值 5
var y = x + 2; // 声明 y,为其赋值 x + 2
多行注释
多行注释以 /* 开头,以 */ 结尾。
任何位于 /* 和 */ 之间的文本都会被 JavaScript 忽略。
本例使用多行注释(注释块)来解释代码:
/*
下面的代码会改变
网页中
id = "myH" 的标题
以及 id = "myP" 的段落:
*/
document.getElementById("myH").innerHTML = "我的第一张页面";
document.getElementById("myP").innerHTML = "我的第一个段落。";
注释:使用单行注释最为常见。
提示:注释块常用于官方声明。
使用注释来阻止执行
使用注释来防止代码执行很适合代码测试。
在代码行之前添加 // 会把可执行的代码行更改为注释。
本例使用 // 来阻止代码行的执行:
//document.getElementById("myH").innerHTML = "我的第一张页面";
document.getElementById("myP").innerHTML = "我的第一个段落。";
JavaScript 变量
JavaScript 变量是存储数据值的容器。
在本例中,x、y 和 z 是变量:
var x = 7;
var y = 8;
var z = x + y;
从上例中,您可获得:
- x 存储值 7
- y 存储值 8
- z 存储值 15
类似代数
在本例中,price1、price2 以及 total 是变量:
var price1 = 7;
var price2 = 8;
var price3 = 12;
var total = price1 + price2 + price3;
在编程中,类似代数,我们使用变量(比如 price1)来存放值。
在编程中,类似代数,我们在表达式中使用变量(total = price1 + price2)。
从上例中,您可以算出 total 的值是 15。
提示:JavaScript 变量是存储数据值的容器。
JavaScript 标识符
所有 JavaScript 变量必须以唯一的名称的标识。
这些唯一的名称称为标识符。
标识符可以是短名称(比如 x 和 y),或者更具描述性的名称(age、sum、totalVolume)。
构造变量名称(唯一标识符)的通用规则是:
- 名称可包含字母、数字、下划线和美元符号
- 名称必须以字母开头
- 名称也可以 $ 和 _ 开头(但是在本教程中我们不会这么做)
- 名称对大小写敏感(y 和 Y 是不同的变量)
- 保留字(比如 JavaScript 的关键词)无法用作变量名称
提示:JavaScript 标识符对大小写敏感。
赋值运算符
在 JavaScript 中,等号(=)是赋值运算符,而不是“等于”运算符。
这一点与代数不同。下面的代码在代数中是不合理的:
x = x + 5
然而在 JavaScript 中,它非常合理:把 x + 5 的值赋给 x。
(计算 x + 5 的值并把结果放入 x 中。x 的值递增 5。)
注释:JavaScript 中的“等于”运算符是 ==。
JavaScript 数据类型
JavaScript 变量可存放数值,比如 100,以及文本值,比如 "Bill Gates"。
在编程中,文本值被称为字符串。
JavaScript 可处理多种数据类型,但是现在,我们只关注数值和字符串值。
字符串被包围在双引号或单引号中。数值不用引号。
如果把数值放在引号中,会被视作文本字符串。
var pi = 3.14;
var person = "Bill Gates";
var answer = 'How are you!';
声明(创建) JavaScript 变量
在 JavaScript 中创建变量被称为“声明”变量。
您可以通过 var 关键词来声明 JavaScript 变量:
var carName;
声明之后,变量是没有值的。(技术上,它的值是 undefined。)
如需赋值给变量,请使用等号:
carName = "porsche";
您可以在声明变量时向它赋值:
var carName = "porsche";
在上面的例子中,我们创建了名为 carName 的变量,并向其赋值 "porsche"。
然后,我们在 id="demo" 的 HTML 段落中“输出”该值:
<p id="demo"></p>
<script>
var carName = "porsche";
document.getElementById("demo").innerHTML = carName;
</script>
提示:在脚本的开头声明所有变量是个好习惯!
一条语句,多个变量
您可以在一条语句中声明许多变量。
以 var 作为语句的开头,并以逗号分隔变量:
var person = "Bill Gates", carName = "porsche", price = 15000;
声明可横跨多行:
Value = undefined
在计算机程序中,被声明的变量经常是不带值的。值可以是需被计算的内容,或是之后被提供的数据,比如数据输入。
不带有值的变量,它的值将是 undefined。
变量 carName 在这条语句执行后的值是 undefined:
var carName;
重复声明 JavaScript 变量
如果再次声明某个 JavaScript 变量,将不会丢它的值。
在这两条语句执行后,变量 carName 的值仍然是 "porsche":
var carName = "porsche";
var carName;
JavaScript 算术
与代数类似,您能够通过 JavaScript 变量进行算术运算,使用 = 和 + 之类的运算符:
var x = 3 + 5 + 8;
字符串也可以使用加号,但是字符串将被级联:
var x = "Bill" + " " + "Gates";
还可以试试这个:
var x = "8" + 3 + 5;
提示:如果把要给数值放入引号中,其余数值会被视作字符串并被级联。
现在试试这个:
var x = 3 + 5 + "8";
JavaScript 运算符
实例
向变量赋值,并把它们相加:
var x = 7; // 向 x 赋值 5
var y = 8; // 向 y 赋值 2
var z = x + y; // 向 z (x + y) 赋值 7
赋值运算符(=)把值赋给变量。
var x = 15;
加法运算符(+)对数字相加:
加法
var x = 7;
var y = 8;
var z = x + y;
乘法运算符(*)对数字相乘:
乘法
var x = 7;
var y = 8;
var z = x * y;
JavaScript 算数运算符
算数运算符用于对数字执行算数运算:
运算符 | 描述 |
---|---|
+ | 加法 |
- | 减法 |
* | 乘法 |
/ | 除法 |
% | 系数 |
++ | 递加 |
-- | 递减 |
注释:JS 算数这一章对算数运算符进行了完整描述。
JavaScript 赋值运算符
赋值运算符向 JavaScript 变量赋值。
运算符 | 例子 | 等同于 |
---|---|---|
= | x = y | x = y |
+= | x += y | x = x + y |
-= | x -= y | x = x - y |
*= | x *= y | x = x * y |
/= | x /= y | x = x / y |
%= | x %= y | x = x % y |
加法赋值运算符(+=)向变量添加一个值。
赋值
var x = 7;
x += 8;
注释:JS 赋值这一章中完整描述了赋值运算符。
JavaScript 字符串运算符
+ 运算符也可用于对字符串进行相加(concatenate,级联)。
实例
txt1 = "Bill";
txt2 = "Gates";
txt3 = txt1 + " " + txt2;
txt3 的结果将是:
Bill Gates
+= 赋值运算符也可用于相加(级联)字符串:
txt1 = "Hello ";
txt1 += "Kitty!";
txt1 的结果将是:
Hello Kitty!
提示:在用于字符串时,+ 运算符被称为级联运算符。
字符串和数字的相加
相加两个数字,将返回和,但对一个数字和一个字符串相加将返回一个字符串:
x = 7 + 8;
y = "7" + 8;
z = "Hello" + 7;
x、y 和 z 的结果将是:
15
78
Hello7
提示:如果您对数字和字符串相加,结果将是字符串!
JavaScript 比较运算符
运算符 | 描述 |
---|---|
== | 等于 |
=== | 等值等型 |
!= | 不相等 |
!== | 不等值或不等型 |
> | 大于 |
< | 小于 |
>= | 大于或等于 |
<= | 小于或等于 |
? | 三元运算符 |
注释:JS 比较这一章中完整描述了比较运算符。
JavaScript 逻辑运算符
运算符 | 描述 |
---|---|
&& | 逻辑与 |
|| | 逻辑或 |
! | 逻辑非 |
注释:JS 比较这一章中完整描述了逻辑运算符。
JavaScript 类型运算符
运算符 | 描述 |
---|---|
typeof | 返回变量的类型。 |
instanceof | 返回 true,如果对象是对象类型的实例。 |
注释:JS 类型转换这一章完整描述了类型运算符。
JavaScript 位运算符
位运算符处理 32 位数。
该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。
运算符 | 描述 | 例子 | 等同于 | 结果 | 十进制 |
---|---|---|---|---|---|
& | 与 | 5 & 1 | 0101 & 0001 | 0001 | 1 |
| | 或 | 5 | 1 | 0101 | 0001 | 0101 | 5 |
~ | 非 | ~ 5 | ~0101 | 1010 | 10 |
^ | 异或 | 5 ^ 1 | 0101 ^ 0001 | 0100 | 4 |
<< | 零填充左位移 | 5 << 1 | 0101 << 1 | 1010 | 10 |
>> | 有符号右位移 | 5 >> 1 | 0101 >> 1 | 0010 | 2 |
>>> | 零填充右位移 | 5 >>> 1 | 0101 >>> 1 | 0010 | 2 |
上例使用 4 位无符号的例子。但是 JavaScript 使用 32 位有符号数。
因此,在 JavaScript 中,~ 5 不会返回 10,而是返回 -6。
~00000000000000000000000000000101 将返回 11111111111111111111111111111010。
注释:我们将在 JS 位运算这一章为您详解位运算符。
课外书
如需更多有关 JavaScript 运算符的知识,请阅读 JavaScript 高级教程中的相关内容:
一元运算符只有一个参数,即要操作的对象或值。本节讲解 ECMAScript 中最简单的运算符 - 一元运算符。
位运算符是在数字底层进行操作的。本节深入讲解了有关整数的知识,并介绍了 ECMAScript 的各种位运算符。
Boolean 运算符非常重要。本节深入讲解三种 Boolean 运算符:NOT、AND 和 OR。
本节讲解 ECMAScript 的乘性运算符:乘法、除法、取模运算符,以及它们的特殊行为。
本节讲解 ECMAScript 的加性运算符:加法、减法运算符,以及它们的特殊行为。
关系运算符执行的是比较运算。本节讲解关系运算符的常规比较方式,以及如何比较字符串与数字。
等性运算符用于判断变量是否相等。ECMAScript 提供两套等性运算符:等号和非等号,以及全等号和非全等号。
本节讲解 ECMAScript 中的条件运算符。
本节讲解 ECMAScript 中的赋值运算符。
本节讲解 ECMAScript 中的逗号运算符。
JavaScript 算术
处理数值的典型情景是算数。
JavaScript 算数运算符
算术运算符对数值(文字或变量)执行算术运算。
运算符 | 描述 |
---|---|
+ | 加法 |
- | 减法 |
* | 乘法 |
** | 幂(ES2016) |
/ | 除法 |
% | 系数 |
++ | 递增 |
-- | 递减 |
算数运算符
典型的算术运算会操作两个数值。
这两个数可以是字面量:
实例
var x = 7 + 8;
或变量:
实例
var x = a + b;
或表达式:
实例
var x = (7 + 8) * a;
运算符和操作数
在算术运算中,数被称为操作数。
(两个操作数之间执行的)运算由运算符定义。
操作数 | 运算符 | 操作数 |
---|---|---|
7 | + | 8 |
加法
加法运算符(+)加数:
var x = 7;
var y = 8;
var z = x + y;
减法
减法运算符(-)减数。
var x = 7;
var y = 8;
var z = x - y;
乘法
乘法运算符(*)乘数。
var x = 7;
var y = 8;
var z = x * y;
除法
除法运算符(/)除数。
var x = 7;
var y = 2;
var z = x / y;
系数
系数运算符(%)返回除法的余数。
var x = 7;
var y = 2;
var z = x % y;
注释:在算术中,两个整数的除法产生商和余数。
注释:在数学中,模运算的结果是算术除法的余数。
递增
递增运算符(++)对数值进行递增。
var x = 7;
x++;
var z = x;
递减
递减运算符(--)对数值进行递减。
var x = 7;
x--;
var z = x;
幂
取幂运算符(**)将第一个操作数提升到第二个操作数的幂。
实例
var x = 5;
var z = x ** 2; // 结果是 25
x ** y 产生的结果与 Math.pow(x,y) 相同:
实例
var x = 5;
var z = Math.pow(x,2); // 结果是 25
运算符优先级
运算符优先级(Operator precedence)描述了在算术表达式中所执行操作的顺序。
实例
var x = 200 + 50 * 2;
上例的结果是 250 * 2 还是 200 + 100 呢?
是加法还是乘法优先呢?
在传统的学校数学中,乘法是优先的。
乘法(*)和除法(%)比加法(+)和减法(-)拥有更高的优先级。
同时,(就像在学校的数学中那样)能够通过使用括号来改变优先级:
实例
var x = (200 + 50) * 2;
当使用括号时,括号中的运算符会首先被计算。
当多个运算拥有相同的优先级时(比如加法和减法),对它们的计算是从左向右的:
实例
var x = 200 + 50 - 2;
JavaScript 运算符优先级值
值 | 运算符 | 描述 | 实例 |
---|---|---|---|
20 | ( ) | 表达式分组 | (3 + 4) |
19 | . | 成员 | person.name |
19 | [] | 成员 | person["name"] |
19 | () | 函数调用 | myFunction() |
19 | new | 创建 | new Date() |
17 | ++ | 后缀递增 | i++ |
17 | -- | 后缀递减 | i-- |
16 | ++ | 前缀递增 | ++i |
16 | -- | 前缀递减 | --i |
16 | ! | 逻辑否 | !(x==y) |
16 | typeof | 类型 | typeof x |
15 | ** | 求幂 (ES7) | 10 ** 2 |
14 | * | 乘 | 10 * 5 |
14 | / | 除 | 10 / 5 |
14 | % | 模数除法 | 10 % 5 |
13 | + | 加 | 10 + 5 |
13 | - | 减 | 10 - 5 |
12 | << | 左位移 | x << 2 |
12 | >> | 右位移 | x >> 2 |
12 | >>> | 右位移(无符号) | x >>> 2 |
11 | < | 小于 | x < y |
11 | <= | 小于或等于 | x <= y |
11 | > | 大于 | x > y |
11 | >= | 大于或等于 | x >= y |
11 | in | 对象中的属性 | "PI" in Math |
11 | instanceof | 对象的实例 | instanceof Array |
10 | == | 相等 | x == y |
10 | === | 严格相等 | x === y |
10 | != | 不相等 | x != y |
10 | !== | 严格不相等 | x !== y |
9 | & | 按位与 | x & y |
8 | ^ | 按位 XOR | x ^ y |
7 | | | 按位或 | x | y |
6 | && | 逻辑与 | x && y |
5 | || | 逻辑否 | x || y |
4 | ? : | 条件 | ? "Yes" : "No" |
3 | = | 赋值 | x = y |
3 | += | 赋值 | x += y |
3 | -= | 赋值 | x -= y |
3 | *= | 赋值 | x *= y |
3 | %= | 赋值 | x %= y |
3 | <<= | 赋值 | x <<= y |
3 | >>= | 赋值 | x >>= y |
3 | >>>= | 赋值 | x >>>= y |
3 | &= | 赋值 | x &= y |
3 | ^= | 赋值 | x ^= y |
3 | |= | 赋值 | x |= y |
2 | yield | 暂停函数 | yield x |
1 | , | 逗号 | 7 , 8 |
注意:淡红色指示实验性或建议性的技术(ECMASScript 2016 或 ES7)
提示:括号中的表达式会在值在表达式的其余部分中被使用之前进行完全计算。
JavaScript 赋值
JavaScript 赋值运算符
赋值运算符向 JavaScript 变量赋值。
运算符 | 例子 | 等同于 |
---|---|---|
= | x = y | x = y |
+= | x += y | x = x + y |
-= | x -= y | x = x - y |
*= | x *= y | x = x * y |
/= | x /= y | x = x / y |
%= | x %= y | x = x % y |
<<= | x <<= y | x = x << y |
>>= | x >>= y | x = x >> y |
>>>= | x >>>= y | x = x >>> y |
&= | x &= y | x = x & y |
^= | x ^= y | x = x ^ y |
|= | x |= y | x = x | y |
**= | x **= y | x = x ** y |
提示:**= 运算符属于 ECMAScript 2016 proposal (ES7) 的实验部分。它的跨浏览器表现并不稳定。请勿使用。
赋值实例
= 赋值运算符向变量赋值。
赋值
var x = 7;
+= 赋值运算符向变量添加值。
赋值
var x = 7;
x += 8;
-= 赋值运算符从变量中减去一个值。
赋值
var x = 7;
x -= 8;
*= 赋值运算符相乘变量。
赋值
var x = 7;
x *= 8;
/= 赋值运算符对变量相除。
赋值
var x = 7;
x /= 8;
%= 赋值运算符把余数赋值给变量。
赋值
var x = 7;
x %= 8;
JavaScript 数据类型
字符串值,数值,布尔值,数组,对象。
JavaScript 数据类型
JavaScript 变量能够保存多种数据类型:数值、字符串值、数组、对象等等:
var length = 7; // 数字
var lastName = "Gates"; // 字符串
var cars = ["Porsche", "Volvo", "BMW"]; // 数组
var x = {firstName:"Bill", lastName:"Gates"}; // 对象
数据类型的概念
在编程过程中,数据类型是重要的概念。
为了能够操作变量,了解数据类型是很重要的。
如果没有数据类型,计算机就无法安全地解决这道题:
var x = 911 + "Porsche";
给 "Volvo" 加上 911 有意义吗?这么做会发生错误还是会产生一个结果?
JavaScript 会这样处理上面的例子:
var x = "911" + "Porsche";
当数值和字符串相加时,JavaScript 将把数值视作字符串。
实例
var x = 911 + "Porsche";
实例
var x = "Porsche" + 911;
JavaScript 从左向右计算表达式。不同的次序会产生不同的结果:
JavaScript:
var x = 911 + 7 + "Porsche";
918Porsche
JavaScript:
var x = "Porsche" + 911 + 7;
结果:
Porsche9117
在第一个例子中,JavaScript 把 911 和 7 视作数值,直到遇见 "Porsche"。
在第二个例子中,由于第一个操作数是字符串,因此所有操作数都被视为字符串。
JavaScript 字符串值
字符串(或文本字符串)是一串字符(比如 "Bill Gates")。
字符串被引号包围。您可使用单引号或双引号:
实例
var carName = "Porsche 911"; // 使用双引号
var carName = 'Porsche 911'; // 使用单引号
您可以在字符串内使用引号,只要这些引号与包围字符串的引号不匹配:
实例
var answer = "It's alright"; // 双引号内的单引号
var answer = "He is called 'Bill'"; // 双引号内的单引号
var answer = 'He is called "Bill"'; // 单引号内的双引号
您将在本教程中学到更多有关字符串的知识。
JavaScript 数值
JavaScript 只有一种数值类型。
写数值时用不用小数点均可:
实例
var x1 = 34.00; // 带小数点
var x2 = 34; // 不带小数点
超大或超小的数值可以用科学计数法来写:
实例
var y = 123e5; // 12300000
var z = 123e-5; // 0.00123
您将在本教程中学到更多有关数值的知识。
JavaScript 布尔值
布尔值只有两个值:true 或 false。
实例
var x = true;
var y = false;
布尔值经常用在条件测试中。
您将在本教程中学到更多有关条件测试的知识。
JavaScript 数组
JavaScript 数组用方括号书写。
数组的项目由逗号分隔。
下面的代码声明(创建)了名为 cars 的数组,包含三个项目(汽车品牌):
实例
var cars = ["Porsche", "Volvo", "BMW"];
数组索引基于零,这意味着第一个项目是 [0],第二个项目是 [1],以此类推。
您将在本教程中学到更多有关数组的知识。
JavaScript 对象
JavaScript 对象用花括号来书写。
对象属性是 name:value 对,由逗号分隔。
实例
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
上例中的对象(person)有四个属性:firstName、lastName、age 以及 eyeColor。
您将在本教程中学到更多有关对象的知识。
typeof 运算符
您可使用 JavaScript 的 typeof 来确定 JavaScript 变量的类型:
typeof 运算符返回变量或表达式的类型:
实例
typeof "" // 返回 "string"
typeof "Bill" // 返回 "string"
typeof "Bill Gates" // 返回 "string"
实例
typeof 0 // 返回 "number"
typeof 314 // 返回 "number"
typeof 3.14 // 返回 "number"
typeof (7) // 返回 "number"
typeof (7 + 8) // 返回 "number"
typeof 运算符对数组返回 "object",因为在 JavaScript 中数组属于对象。
Undefined
在 JavaScript 中,没有值的变量,其值是 undefined。typeof 也返回 undefined。
实例
var person; // 值是 undefined,类型是 undefined
任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。
实例
person = undefined; // 值是 undefined,类型是 undefined
空值
空值与 undefined 不是一回事。
空的字符串变量既有值也有类型。
实例
var car = ""; // 值是 "",类型是 "string"
Null
在 JavaScript 中,null 是 "nothing"。它被看做不存在的事物。
不幸的是,在 JavaScript 中,null 的数据类型是对象。
您可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null。
您可以通过设置值为 null 清空对象:
实例
var person = null; // 值是 null,但是类型仍然是对象
您也可以通过设置值为 undefined 清空对象:
实例
var person = undefined; // 值是 undefined,类型是 undefined
Undefined 与 Null 的区别
Undefined 与 null 的值相等,但类型不相等:
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
原始数据
原始数据值是一种没有额外属性和方法的单一简单数据值。
typeof 运算符可返回以下原始类型之一:
- string
- number
- boolean
- undefined
实例
typeof "Bill" // 返回 "string"
typeof 3.14 // 返回 "number"
typeof true // 返回 "boolean"
typeof false // 返回 "boolean"
typeof x // 返回 "undefined" (假如 x 没有值)
复杂数据
typeof 运算符可返回以下两种类型之一:
- function
- object
typeof 运算符把对象、数组或 null 返回 object。
typeof 运算符不会把函数返回 object。
实例
typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4] // 返回 "object" (并非 "array",参见下面的注释)
typeof null // 返回 "object"
typeof function myFunc(){} // 返回 "function"
typeof 运算符把数组返回为 "object",因为在 JavaScript 中数组即对象。
课外阅读
JavaScript 高级教程:
JavaScript 函数
JavaScript 函数是被设计为执行特定任务的代码块。
JavaScript 函数会在某代码调用它时被执行。
function myFunction(p1, p2) {
return p1 * p2; // 该函数返回 p1 和 p2 的乘积
}
JavaScript 函数语法
JavaScript 函数通过 function 关键词进行定义,其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号(规则与变量名相同)。
圆括号可包括由逗号分隔的参数:
(参数 1, 参数 2, ...)
由函数执行的代码被放置在花括号中:{}
function name(参数 1, 参数 2, 参数 3) {
要执行的代码
}
函数参数(Function parameters)是在函数定义中所列的名称。
函数参数(Function arguments)是当调用函数时由函数接收的真实的值。
在函数中,参数是局部变量。
在其他编程语言中,函数近似程序(Procedure)或子程序(Subroutine)。
函数调用
函数中的代码将在其他代码调用该函数时执行:
- 当事件发生时(当用户点击按钮时)
- 当 JavaScript 代码调用时
- 自动的(自调用)
您将在本教程中学到更多有关函数调用的知识。
函数返回
当 JavaScript 到达 return 语句,函数将停止执行。
如果函数被某条语句调用,JavaScript 将在调用语句之后“返回”执行代码。
函数通常会计算出返回值。这个返回值会返回给调用者:
实例
计算两个数的乘积,并返回结果:
var x = myFunction(7, 8); // 调用函数,返回值被赋值给 x
function myFunction(a, b) {
return a * b; // 函数返回 a 和 b 的乘积
}
x 的结果将是:
56
为何使用函数?
您能够对代码进行复用:只要定义一次代码,就可以多次使用它。
您能够多次向同一函数传递不同的参数,以产生不同的结果。
实例
把华氏度转换为摄氏度:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
() 运算符调用函数
使用上面的例子,toCelsius 引用的是函数对象,而 toCelsius() 引用的是函数结果。
实例
访问没有 () 的函数将返回函数定义:
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;
用作变量值的函数
函数的使用方法与变量一致,在所有类型的公式、赋值和计算中。
实例
使用变量来存储函数的值:
var x = toCelsius(77);
var text = "The temperature is " + x + " Celsius";
您能够把函数当做变量值直接使用:
var text = "The temperature is " + toCelsius(77) + " Celsius";
局部变量
在 JavaScript 函数中声明的变量,会成为函数的局部变量。
局部变量只能在函数内访问。
实例
// 此处的代码不能使用 carName
function myFunction() {
var carName = "Volvo";
// code here CAN use carName
}
// 此处的代码可以使用 carName
由于局部变量只能被其函数识别,因此可以在不同函数中使用相同名称的变量。
局部变量在函数开始时创建,在函数完成时被删除。
课外书
如需更多有关 JavaScript 函数的知识,请阅读 JavaScript 高级教程中的相关内容:
本节讲解函数的概念,ECMAScript 如何声明并调用函数,以及函数如何返回值。
本节介绍了此对象的基本用法,然后讲解了如何使用 length 属性来测定函数的参数数目,以及模拟函数重载。
本节讲解了如何使用 Function 类创建函数,然后介绍了 Function 对象的属性和方法。
本节讲解了闭包(closure)的概念,并分别为您展示了简单和稍复杂的两个闭包实例。
JavaScript 对象
真实生活中的对象、属性和方法
在真实生活中,汽车是一个对象。
汽车有诸如车重和颜色等属性,也有诸如启动和停止的方法:
所有汽车都拥有同样的属性,但属性值因车而异。
所有汽车都拥有相同的方法,但是方法会在不同时间被执行。
JavaScript 对象
您之前已经学到,JavaScript 变量是数据值的容器。
这段代码把一个单一值(porsche)赋给名为 car 的变量:
var car = "porsche";
对象也是变量。但是对象包含很多值。
这段代码把多个值(porsche, 911, white)赋给名为 car 的变量:
var car = {type:"porsche", model:"911", color:"white"};
值以名称:值对的方式来书写(名称和值由冒号分隔)。
JavaScript 对象是被命名值的容器。
对象属性
(JavaScript 对象中的)名称:值对被称为属性。
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
属性 | 属性值 |
---|---|
firstName | Bill |
lastName | Gates |
age | 62 |
eyeColor | blue |
对象方法
对象也可以有方法。
方法是在对象上执行的动作。
方法以函数定义被存储在属性中。
属性 | 属性值 |
---|---|
firstName | Bill |
lastName | Gates |
age | 62 |
eyeColor | blue |
fullName | function() {return this.firstName + " " + this.lastName;} |
方法是作为属性来存储的函数。
实例
var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
this 关键词
在函数定义中,this 引用该函数的“拥有者”。
在上面的例子中,this 指的是“拥有” fullName 函数的 person 对象。
换言之,this.firstName 的意思是 this 对象的 firstName 属性。
请在 JS this 关键词这一章学习更多有关 this 关键词的知识。
对象定义
我们定义(创建)了一个 JavaScript 对象:
实例
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
空格和折行都是允许的。对象定义可横跨多行:
实例
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
};
访问对象属性
您能够以两种方式访问属性:
objectName.propertyName
或者
objectName["propertyName"]
例子 1
person.lastName;
例子 2
person["lastName"];
访问对象方法
您能够通过如下语法访问对象方法:
objectName.methodName()
实例
name = person.fullName();
如果您不使用 () 访问 fullName 方法,则将返回函数定义:
实例
name = person.fullName;
方法实际上是以属性值的形式存储的函数定义。
请不要把字符串、数值和布尔值声明为对象!
如果通过关键词 "new" 来声明 JavaScript 变量,则该变量会被创建为对象:
var x = new String(); // 把 x 声明为 String 对象
var y = new Number(); // 把 y 声明为 Number 对象
var z = new Boolean(); // 把 z 声明为 Boolean 对象
请避免字符串、数值或逻辑对象。他们会增加代码的复杂性并降低执行速度。
您将在本教程的稍后章节学到更多有关对象的知识。
课外书
如需更多有关 JavaScript 对象的知识,请阅读 JavaScript 高级教程中的相关内容:
本节简要介绍了面向对象技术的术语、面向对象语言的要求以及对象的构成。
本节讲解了如何声明和实例化对象,如何引用和废除对象,以及绑定的概念。
本节介绍了 ECMAScript 的三种类型:本地对象、内置对象和宿主对象,并提供了指向相关参考手册的链接。
本节讲解了 ECMAScript 作用域以及 this 关键字。
本节详细讲解了创建 ECMAScript 对象或类的各种方式。
本节讲解了如何通过创建新方法或重定义已有方法来修改对象。
JavaScript 事件
HTML 事件是发生在 HTML 元素上的“事情”。
当在 HTML 页面中使用 JavaScript 时,JavaScript 能够“应对”这些事件。
HTML 事件
HTML 事件可以是浏览器或用户做的某些事情。
下面是 HTML 事件的一些例子:
- HTML 网页完成加载
- HTML 输入字段被修改
- HTML 按钮被点击
通常,当事件发生时,用户会希望做某件事。
JavaScript 允许您在事件被侦测到时执行代码。
通过 JavaScript 代码,HTML 允许您向 HTML 元素添加事件处理程序。
使用单引号:
<element event='一些 JavaScript'>
使用双引号:
<element event="一些 JavaScript">
在下面的例子中,onclick 属性(以及代码)被添加到 <button> 元素:
实例
<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是?</button>
在上面的例子中,JavaScript 代码改变了 id="demo" 的元素的内容。
在接下来的例子中,代码(使用 this.innerHTML)改变了其自身元素的内容:
实例
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
JavaScript 代码通常有很多行。事件属性调用函数更为常见:
实例
<button onclick="displayDate()">现在的时间是?</button>
常见的 HTML 事件
下面是一些常见的 HTML 事件:
事件 | 描述 |
---|---|
onchange | HTML 元素已被改变 |
onclick | 用户点击了 HTML 元素 |
onmouseover | 用户把鼠标移动到 HTML 元素上 |
onmouseout | 用户把鼠标移开 HTML 元素 |
onkeydown | 用户按下键盘按键 |
onload | 浏览器已经完成页面加载 |
更完整的列表:W3School JavaScript 参考手册 HTML DOM 事件。
JavaScript 能够做什么?
事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作:
- 每当页面加载时应该做的事情
- 当页面被关闭时应该做的事情
- 当用户点击按钮时应该被执行的动作
- 当用户输入数据时应该被验证的内容
- 等等
让 JavaScript 处理事件的不同方法有很多:
- HTML 事件属性可执行 JavaScript 代码
- HTML 事件属性能够调用 JavaScript 函数
- 您能够向 HTML 元素分配自己的事件处理函数
- 您能够阻止事件被发送或被处理
- 等等
您将在 HTML DOM 章节中学到更多有关事件和事件处理程序的知识。
JavaScript 字符串
JavaScript 字符串用于存储和操作文本。
JavaScript 字符串
JavaScript 字符串是引号中的零个或多个字符。
实例
var x = "Bill Gates"
您能够使用单引号或双引号:
实例
var carname = "Porsche 911";
var carname = 'Porsche 911';
您可以在字符串中使用引号,只要不匹配围绕字符串的引号即可:
实例
var answer = "It's good to see you again!";
var answer = "He is called 'Bill'";
var answer = 'He is called "Bill"';
字符串长度
内建属性 length 可返回字符串的长度:
实例
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
特殊字符
由于字符串必须由引号包围,JavaScript 会误解这段字符串:
var y = "中国是瓷器的故乡,因此 china 与"China(中国)"同名。"
该字符串将被切为 "中国是瓷器的故乡,因此 china 与"。
避免此问题的解决方法是,使用 \ 转义字符。
反斜杠转义字符把特殊字符转换为字符串字符:
代码 | 结果 | 描述 |
---|---|---|
\' | ' | 单引号 |
\" | " | 双引号 |
\\ | \ | 反斜杠 |
实例
序列 \" 在字符串中插入双引号:
实例
var x = "中国是瓷器的故乡,因此 china 与\"China(中国)\"同名。"
序列 \' 在字符串中插入单引号:
实例
var x = 'It\'s good to see you again';
序列 \\ 在字符串中插入反斜杠:
实例
var x = "字符 \\ 被称为反斜杠。";
转义字符(\)也可用于在字符串中插入其他特殊字符。
其他六个 JavaScript 中有效的转义序列:
代码 | 结果 |
---|---|
\b | 退格键 |
\f | 换页 |
\n | 新行 |
\r | 回车 |
\t | 水平制表符 |
\v | 垂直制表符 |
这六个转义字符最初设计用于控制打字机、电传打字机和传真机。它们在 HTML 中没有任何意义。
长代码行换行
为了最佳可读性, 程序员们通常会避免每行代码超过 80 个字符串。
如果某条 JavaScript 语句不适合一整行,那么最佳换行位置是某个运算符之后:
实例
document.getElementById("demo").innerHTML =
"Hello Kitty.";
您也可以在字符串中换行,通过一个反斜杠即可:
实例
document.getElementById("demo").innerHTML = "Hello \
Kitty!";
\ 方法并不是 ECMAScript (JavaScript) 标准。
某些浏览器也不允许 \ 字符之后的空格。
对长字符串换行的最安全做法(但是有点慢)是使用字符串加法:
实例
document.getElementById("demo").innerHTML = "Hello" +
"Kitty!";
您不能通过反斜杠对代码行进行换行:
实例
document.getElementById("demo").innerHTML = \
"Hello Kitty!";
字符串可以是对象
通常,JavaScript 字符串是原始值,通过字面方式创建:
var firstName = "Bill"
但是字符串也可通过关键词 new 定义为对象:
var firstName = new String("Bill")
实例
var x = "Bill";
var y = new String("Bill");
// typeof x 将返回 string
// typeof y 将返回 object
请不要把字符串创建为对象。它会拖慢执行速度。
new 关键字使代码复杂化。也可能产生一些意想不到的结果:
当使用 == 相等运算符时,相等字符串是相等的:
实例
var x = "Bill";
var y = new String("Bill");
// (x == y) 为 true,因为 x 和 y 的值相等
当使用 === 运算符时,相等字符串是不相等的,因为 === 运算符需要类型和值同时相等。
实例
var x = "Bill";
var y = new String("Bill");
// (x === y) 为 false,因为 x 和 y 的类型不同(字符串与对象)
甚至更糟。对象无法比较:
实例
var x = new String("Bill");
var y = new String("Bill");
// (x == y) 为 false,因为 x 和 y 是不同的对象
var x = new String("Bill");
var y = new String("Bill");
// (x === y) 为 false,因为 x 和 y 是不同的对象
请注意 (x==y) 与 (x===y) 的区别。
JavaScript 对象无法进行对比,比较两个 JavaScript 将始终返回 false。
JavaScript 字符串方法
字符串方法帮助您处理字符串。
字符串方法和属性
原始值,比如“Bill Gates”,无法拥有属性和方法(因为它们不是对象)。
但是通过 JavaScript,方法和属性也可用于原始值,因为在执行方法和属性时 JavaScript 将原始值视为对象。
字符串长度
length 属性返回字符串的长度:
实例
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
查找字符串中的字符串
indexOf() 方法返回字符串中指定文本首次出现的索引(位置):
实例
var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China");
JavaScript 从零计算位置。
0 是字符串中的第一个位置,1 是第二个,2 是第三个 ...
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引:
实例
var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China");
如果未找到文本, indexOf() 和 lastIndexOf() 均返回 -1。
实例
var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("USA");
两种方法都接受作为检索起始位置的第二个参数。
实例
var str = "The full name of China is the People's Republic of China.";
var pos = str.indexOf("China", 18);
lastIndexOf() 方法向后进行检索(从尾到头),这意味着:假如第二个参数是 50,则从位置 50 开始检索,直到字符串的起点。
实例
var str = "The full name of China is the People's Republic of China.";
var pos = str.lastIndexOf("China", 50);
检索字符串中的字符串
search() 方法搜索特定值的字符串,并返回匹配的位置:
实例
var str = "The full name of China is the People's Republic of China.";
var pos = str.search("locate");
您注意到了吗?
两种方法,indexOf() 与 search(),是相等的。
这两种方法是不相等的。区别在于:
- search() 方法无法设置第二个开始位置参数。
- indexOf() 方法无法设置更强大的搜索值(正则表达式)。
您将在正则表达式的章节学习到这些更强大的检索值。
提取部分字符串
有三种提取部分字符串的方法:
- slice(start, end)
- substring(start, end)
- substr(start, length)
slice() 方法
slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
该方法设置两个参数:起始索引(开始位置),终止索引(结束位置)。
这个例子裁剪字符串中位置 7 到位置 13 的片段:
实例
var str = "Apple, Banana, Mango";
var res = str.slice(7,13);
res 的结果是:
Banana
如果省略第二个参数,则该方法将裁剪字符串的剩余部分:
实例
var res = str.slice(7);
或者从结尾计数:
实例
var res = str.slice(-13);
提示:负值位置不适用 Internet Explorer 8 及其更早版本。
substring() 方法
substring() 类似于 slice()。
不同之处在于 substring() 无法接受负的索引。
实例
var str = "Apple, Banana, Mango";
var res = str.substring(7,13);
res 的结果是:
Banana
substr() 方法
substr() 类似于 slice()。
不同之处在于第二个参数规定被提取部分的长度。
实例
var str = "Apple, Banana, Mango";
var res = str.substr(7,6);
res 的结果是:
Banana
如果省略第二个参数,则该 substring() 将裁剪字符串的剩余部分。
substr() 方法
substr() 类似于 slice()。
不同之处在于第二个参数规定被提取部分的长度。
实例
var str = "Apple, Banana, Mango";
var res = str.substr(7,6);
res 的结果是:
Banana
如果省略第二个参数,则该 substr() 将裁剪字符串的剩余部分。
实例
var str = "Apple, Banana, Mango";
var res = str.substr(7);
如果首个参数为负,则从字符串的结尾计算位置。
实例
var str = "Apple, Banana, Mango";
var res = str.substr(-5);
第二个参数不能为负,因为它定义的是长度。
替换字符串内容
replace() 方法用另一个值替换在字符串中指定的值:
实例
str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3School");
replace() 方法不会改变调用它的字符串。它返回的是新字符串。
默认地,replace() 只替换首个匹配:
实例
str = "Please visit Microsoft and Microsoft!";
var n = str.replace("Microsoft", "W3School");
默认地,replace() 对大小写敏感。因此不对匹配 MICROSOFT:
如需执行大小写不敏感的替换,请使用正则表达式 /i(大小写不敏感):
实例
str = "Please visit Microsoft!";
var n = str.replace(/MICROSOFT/i, "W3School");
请注意正则表达式不带引号。
如需替换所有匹配,请使用正则表达式的 g 标志(用于全局搜索):
实例
str = "Please visit Microsoft and Microsoft!";
var n = str.replace(/Microsoft/g, "W3School");
您将在 JavaScript 正则表达式这一章学到更多有关正则表达式的内容。
转换为大写和小写
通过 toUpperCase() 把字符串转换为大写:
实例
var text1 = "Hello World!"; // 字符串
var text2 = text1.toUpperCase(); // text2 是被转换为大写的 text1
通过 toLowerCase() 把字符串转换为小写:
实例
var text1 = "Hello World!"; // 字符串
var text2 = text1.toLowerCase(); // text2 是被转换为小写的 text1
concat() 方法
concat() 连接两个或多个字符串:
实例
var text1 = "Hello";
var text2 = "World";
text3 = text1.concat(" ",text2);
concat() 方法可用于代替加运算符。下面两行是等效的:
实例
var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");
所有字符串方法都会返回新字符串。它们不会修改原始字符串。
正式地说:字符串是不可变的:字符串不能更改,只能替换。
String.trim()
trim() 方法删除字符串两端的空白符:
实例
var str = " Hello World! ";
alert(str.trim());
警告:Internet Explorer 8 或更低版本不支持 trim() 方法。
如需支持 IE 8,您可搭配正则表达式使用 replace() 方法代替:
实例
var str = " Hello World! ";
alert(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));
您还可以使用上面的 replace 方案把 trim 函数添加到 JavaScript String.prototype:
实例
if (!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
var str = " Hello World! ";
alert(str.trim());
提取字符串字符
这是两个提取字符串字符的安全方法:
- charAt(position)
- charCodeAt(position)
charAt() 方法
charAt() 方法返回字符串中指定下标(位置)的字符串:
实例
var str = "HELLO WORLD";
str.charAt(0); // 返回 H
charCodeAt() 方法
charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码:
实例
var str = "HELLO WORLD";
str.charCodeAt(0); // 返回 72
属性访问(Property Access)
ECMAScript 5 (2009) 允许对字符串的属性访问 [ ]:
实例
var str = "HELLO WORLD";
str[0]; // 返回 H
使用属性访问有点不太靠谱:
- 不适用 Internet Explorer 7 或更早的版本
- 它让字符串看起来像是数组(其实并不是)
- 如果找不到字符,[ ] 返回 undefined,而 charAt() 返回空字符串。
- 它是只读的。str[0] = "A" 不会产生错误(但也不会工作!)
实例
var str = "HELLO WORLD";
str[0] = "A"; // 不产生错误,但不会工作
str[0]; // 返回 H
提示:如果您希望按照数组的方式处理字符串,可以先把它转换为数组。
把字符串转换为数组
可以通过 split() 将字符串转换为数组:
实例
var txt = "a,b,c,d,e"; // 字符串
txt.split(","); // 用逗号分隔
txt.split(" "); // 用空格分隔
txt.split("|"); // 用竖线分隔
如果省略分隔符,被返回的数组将包含 index [0] 中的整个字符串。
如果分隔符是 "",被返回的数组将是间隔单个字符的数组:
实例
var txt = "Hello"; // 字符串
txt.split(""); // 分隔为字符
完整的 String 参考手册
如需完整的参考手册,请访问我们完整的 JavaScript 字符串参考手册。
该手册包含了有关所有字符串属性和方法的描述和实例。
JavaScript 数字
JavaScript 只有一种数值类型。
书写数值时带不带小数点均可。
JavaScript 数值
书写 JavaScript 数值既可以带小数点,也可以不带:
实例
var x = 3.14; // 带小数点的数值
var y = 3; // 不带小数点的数值
超大或超小的数可通过科学计数法来写:
实例
var x = 123e5; // 12300000
var y = 123e-5; // 0.00123
JavaScript 数值始终是 64 位的浮点数
与许多其他编程语言不同,JavaScript 不会定义不同类型的数,比如整数、短的、长的、浮点的等等。
JavaScript 数值始终以双精度浮点数来存储,根据国际 IEEE 754 标准。
此格式用 64 位存储数值,其中 0 到 51 存储数字(片段),52 到 62 存储指数,63 位存储符号:
值(aka Fraction/Mantissa) | 指数 | 符号 |
---|---|---|
52 bits(0 - 51) | 11 bits (52 - 62) | 1 bit (63) |
精度
整数(不使用指数或科学计数法)会被精确到 15 位。
实例
var x = 999999999999999; // x 将是 999999999999999
var y = 9999999999999999; // y 将是 10000000000000000
小数的最大数是 17 位,但是浮点的算数并不总是 100% 精准:
实例
var x = 0.2 + 0.1; // x 将是 0.30000000000000004
使用乘除法有助于解决上面的问题:
实例
var x = (0.2 * 10 + 0.1 * 10) / 10; // x 将是 0.3
数字和字符串相加
警告!!
JavaScript 的加法和级联(concatenation)都使用 + 运算符。
数字用加法。字符串用级联。
如果您对两个数相加,结果将是一个数:
实例
var x = 10;
var y = 20;
var z = x + y; // z 将是 30(一个数)
如果对两个字符串相加,结果将是一个字符串的级联:
实例
var x = "10";
var y = "20";
var z = x + y; // z 将是 1020(字符串)
如果您对一个数和一个字符串相加,结果也是字符串级联:
实例
var x = 10;
var y = "20";
var z = x + y; // z 将是 1020(一个字符串)
如果您对一个字符串和一个数字相加,结果也是字符串级联:
实例
var x = "10";
var y = 20;
var z = x + y; // z 将是 1020(字符串)
常见的错误是认为结果应该是 30:
实例
var x = 10;
var y = 20;
var z = "The result is: " + x + y;
常见的错误是认为结果应该是 102030:
实例
var x = 10;
var y = 20;
var z = "30";
var result = x + y + z;
JavaScript 从左向右进行编译。
因为 x 和 y 都是数,10 + 20 将被相加。
因为 z 是字符串,30 + "30" 被级联。
数字字符串
JavaScript 字符串可以拥有数字内容:
var x = 100; // x 是数字
var y = "100"; // y 是字符串
在所有数字运算中,JavaScript 会尝试将字符串转换为数字:
该例如此运行:
var x = "100";
var y = "10";
var z = x / y; // z 将是 10
该例也将如此运行:
var x = "100";
var y = "10";
var z = x * y; // z 将是 1000
该例如此运行:
var x = "100";
var y = "10";
var z = x - y; // z 将是 90
但是该例不会如上例般运行:
var x = "100";
var y = "10";
var z = x + y; // z 不会是 110(而是 10010)
在最后一个例子中,JavaScript 用 + 运算符对字符串进行了级联。
NaN - 非数值
NaN 属于 JavaScript 保留词,指示某个数不是合法数。
尝试用一个非数字字符串进行除法会得到 NaN(Not a Number):
实例
var x = 100 / "Apple"; // x 将是 NaN(Not a Number)
不过,假如字符串包含数值,则结果将是数:
实例
var x = 100 / "10"; // x 将是 10
您可使用全局 JavaScript 函数 isNaN() 来确定某个值是否是数:
实例
var x = 100 / "Apple";
isNaN(x); // 返回 true,因为 x 不是数
要小心 NaN。假如您在数学运算中使用了 NaN,则结果也将是 NaN:
实例
var x = NaN;
var y = 5;
var z = x + y; // z 将是 NaN
结果也许是串连接:
实例
var x = NaN;
var y = "5";
var z = x + y; // z 将是 NaN5
NaN 是数,typeof NaN 返回 number:
实例
typeof NaN; // 返回 "number"
Infinity
Infinity (或 -Infinity)是 JavaScript 在计算数时超出最大可能数范围时返回的值。
实例
var myNumber = 2;
while (myNumber != Infinity) { // 执行直到 Infinity
myNumber = myNumber * myNumber;
}
除以 0(零)也会生成 Infinity:
实例
var x = 2 / 0; // x 将是 Infinity
var y = -2 / 0; // y 将是 -Infinity
Infinity 是数:typeOf Infinity 返回 number。
实例
typeof Infinity; // 返回 "number"
十六进制
JavaScript 会把前缀为 0x 的数值常量解释为十六进制。
实例
var x = 0xFF; // x 将是 255
绝不要用前导零写数字(比如 07)。
一些 JavaScript 版本会把带有前导零的数解释为八进制。
默认地,Javascript 把数显示为十进制小数。
但是您能够使用 toString() 方法把数输出为十六进制、八进制或二进制。
实例
var myNumber = 128;
myNumber.toString(16); // 返回 80
myNumber.toString(8); // 返回 200
myNumber.toString(2); // 返回 10000000
数值可以是对象
通常 JavaScript 数值是通过字面量创建的原始值:var x = 123
但是也可以通过关键词 new 定义为对象:var y = new Number(123)
实例
var x = 123;
var y = new Number(123);
// typeof x 返回 number
// typeof y 返回 object
请不要创建数值对象。这样会拖慢执行速度。
new 关键词使代码复杂化,并产生某些无法预料的结果:
当使用 == 相等运算符时,相等的数看上去相等:
实例
var x = 500;
var y = new Number(500);
// (x == y) 为 true,因为 x 和 y 有相等的值
当使用 === 相等运算符后,相等的数变为不相等,因为 === 运算符需要类型和值同时相等。
实例
var x = 500;
var y = new Number(500);
// (x === y) 为 false,因为 x 和 y 的类型不同
甚至更糟。对象无法进行对比:
实例
var x = new Number(500);
var y = new Number(500);
// (x == y) 为 false,因为对象无法比较
JavaScript 对象无法进行比较。
JavaScript 数值方法
Number 方法帮助您处理数值。
Number 方法和属性
原始值(比如 3.14 或 2016),无法拥有属性和方法(因为它们不是对象)。
但是通过 JavaScript,方法和属性也可用于原始值,因为 JavaScript 在执行方法和属性时将原始值视作对象。
toString() 方法
toString() 以字符串返回数值。
所有数字方法可用于任意类型的数字(字面量、变量或表达式):
实例
var x = 123;
x.toString(); // 从变量 x 返回 123
(123).toString(); // 从文本 123 返回 123
(100 + 23).toString(); // 从表达式 100 + 23 返回 123
JavaScript 数值方法
Number 方法帮助您处理数值。
Number 方法和属性
原始值(比如 3.14 或 2016),无法拥有属性和方法(因为它们不是对象)。
但是通过 JavaScript,方法和属性也可用于原始值,因为 JavaScript 在执行方法和属性时将原始值视作对象。
toString() 方法
toString() 以字符串返回数值。
所有数字方法可用于任意类型的数字(字面量、变量或表达式):
实例
var x = 123;
x.toString(); // 从变量 x 返回 123
(123).toString(); // 从文本 123 返回 123
(100 + 23).toString(); // 从表达式 100 + 23 返回 123
toExponential() 方法
toExponential() 返回字符串值,它包含已被四舍五入并使用指数计数法的数字。
参数定义小数点后的字符数:
实例
var x = 9.656;
x.toExponential(2); // 返回 9.66e+0
x.toExponential(4); // 返回 9.6560e+0
x.toExponential(6); // 返回 9.656000e+0
该参数是可选的。如果您没有设置它,JavaScript 不会对数字进行舍入。
toFixed() 方法
toFixed() 返回字符串值,它包含了指定位数小数的数字:
实例
var x = 9.656;
x.toFixed(0); // 返回 10
x.toFixed(2); // 返回 9.66
x.toFixed(4); // 返回 9.6560
x.toFixed(6); // 返回 9.656000
toFixed(2) 非常适合处理金钱。
toPrecision() 方法
toPrecision() 返回字符串值,它包含了指定长度的数字:
实例
var x = 9.656;
x.toPrecision(); // 返回 9.656
x.toPrecision(2); // 返回 9.7
x.toPrecision(4); // 返回 9.656
x.toPrecision(6); // 返回 9.65600
valueOf() 方法
valueOf() 以数值返回数值:
实例
var x = 123;
x.valueOf(); // 从变量 x 返回 123
(123).valueOf(); // 从文本 123 返回 123
(100 + 23).valueOf(); // 从表达式 100 + 23 返回 123
在 JavaScript 中,数字可以是原始值(typeof = number)或对象(typeof = object)。
在 JavaScript 内部使用 valueOf() 方法可将 Number 对象转换为原始值。
没有理由在代码中使用它。
所有 JavaScript 数据类型都有 valueOf() 和 toString() 方法。
把变量转换为数值
这三种 JavaScript 方法可用于将变量转换为数字:
- Number() 方法
- parseInt() 方法
- parseFloat() 方法
这些方法并非数字方法,而是全局 JavaScript 方法。
全局方法
JavaScript 全局方法可用于所有 JavaScript 数据类型。
这些是在处理数字时最相关的方法:
方法 | 描述 |
---|---|
Number() | 返回数字,由其参数转换而来。 |
parseFloat() | 解析其参数并返回浮点数。 |
parseInt() | 解析其参数并返回整数。 |
Number() 方法
Number() 可用于把 JavaScript 变量转换为数值:
实例
x = true;
Number(x); // 返回 1
x = false;
Number(x); // 返回 0
x = new Date();
Number(x); // 返回 1404568027739
x = "10"
Number(x); // 返回 10
x = "10 20"
Number(x); // 返回 NaN
如果无法转换数字,则返回 NaN。
用于日期的 Number() 方法
Number() 还可以把日期转换为数字:
实例
Number(new Date("2019-04-15")); // 返回 1506729600000
上面的 Number() 方法返回 1970 年 1 月 1 日至今的毫秒数。
parseInt() 方法
parseInt() 解析一段字符串并返回数值。允许空格。只返回首个数字:
实例
parseInt("10"); // 返回 10
parseInt("10.33"); // 返回 10
parseInt("10 20 30"); // 返回 10
parseInt("10 years"); // 返回 10
parseInt("years 10"); // 返回 NaN
如果无法转换为数值,则返回 NaN (Not a Number)。
parseFloat() 方法
parseFloat() 解析一段字符串并返回数值。允许空格。只返回首个数字:
实例
parseFloat("10"); // 返回 10
parseFloat("10.33"); // 返回 10.33
parseFloat("10 20 30"); // 返回 10
parseFloat("10 years"); // 返回 10
parseFloat("years 10"); // 返回 NaN
如果无法转换为数值,则返回 NaN (Not a Number)。
数值属性
属性 | 描述 |
---|---|
MAX_VALUE | 返回 JavaScript 中可能的最大数。 |
MIN_VALUE | 返回 JavaScript 中可能的最小数。 |
NEGATIVE_INFINITY | 表示负的无穷大(溢出返回)。 |
NaN | 表示非数字值("Not-a-Number")。 |
POSITIVE_INFINITY | 表示无穷大(溢出返回)。 |
JavaScript MIN_VALUE 和 MAX_VALUE
MAX_VALUE 返回 JavaScript 中可能的最大数字。
实例
var x = Number.MAX_VALUE;
MIN_VALUE 返回 JavaScript 中可能的最小数字。
JavaScript POSITIVE_INFINITY
实例
var x = Number.POSITIVE_INFINITY;
溢出时返回 POSITIVE_INFINITY:
实例
var x = 1 / 0;
JavaScript NEGATIVE_INFINITY
实例
var x = Number.NEGATIVE_INFINITY;
溢出时返回 NEGATIVE_INFINITY:
实例
var x = -1 / 0;
JavaScript NaN - 非数字
实例
var x = Number.NaN;
NaN 属于 JavaScript 保留字,指示数字并非合法的数字。
尝试使用非数字字符串进行算术运算将导致 NaN(非数字):
实例
var x = 100 / "Apple"; // x 将是 NaN (Not a Number)
数字属性不可用于变量
数字属性属于名为 number 的 JavaScript 数字对象包装器。
这些属性只能作为 Number.MAX_VALUE 访问。
使用 myNumber.MAX_VALUE,其中 myNumber 是变量、表达式或值,将返回 undefined:
实例
var x = 6;
var y = x.MAX_VALUE; // y 成为 undefined
完整的 JavaScript Number 参考手册
如需完整的参考手册,请访问我们完整的 JavaScript Number 参考手册。
参考手册包含所有 Number 对象属性和方法的描述和实例。