从0到1 JavaScript 快速上手 微视频版

从0到1.JavaScript 快速上手：微视频版

莫振杰　著

人民邮电出版社

北京

图书在版编目（CIP）数据

从0到1.JavaScript 快速上手/莫振杰著.--北京：人民邮电出版社，2019.12

ISBN　978-7-115-51300-7

Ⅰ.①从…　Ⅱ.①莫…　Ⅲ.①JAVA语言—程序设计　Ⅳ.①TP3

中国版本图书馆CIP数据核字（2019）第095391号

◆著　莫振杰

责任编辑　俞彬

责任印制　马振武

◆人民邮电出版社出版发行　　北京市丰台区成寿寺路11号

邮编　100164　　电子邮件　315@ptpress.com.cn

网址　http://www.ptpress.com.cn

北京市艺辉印刷有限公司印刷

◆开本：787×1092　1/16

印张：21

字数：578千字　　2019年12月第1版

印数：1—2500册　　2019年12月北京第1次印刷

定价：49.80元

读者服务热线：(010)81055410　印装质量热线：(010)81055316

反盗版热线：(010)81055315

广告经营许可证：京东工商广登字20170147号

内容提要

作者根据自己多年的前后端开发经验，站在完全零基础读者的角度，详尽介绍了JavaScript的基础知识，以及大量的开发技巧。

全书分为两大部分：第一部分是JavaScript的语法基础，主要介绍流程控制、函数、字符串、数组等基本语法；第二部分是JavaScript的核心技术，主要介绍DOM操作、事件操作、window对象、document对象等核心技术。此外，作者还结合实际工作及前端面试，为全书的每一章精心配备了大量高质量的练习题，读者可以边学边练，更好地掌握本书内容。

本书为每一节内容录制了高质量的视频课，并且配备了所有案例的源码。为了方便高校老师教学，本书还提供了配套的PPT课件。本书适合完全零基础的初学者使用，可以作为前端开发人员的参考书，也可以作为大中专院校相关专业的教学参考书。

其他

如果你想要快速上手前端开发，又岂能错过“从0到1”系列？

这是一本非常有个性的书，学起来非常轻松！当初看到这本书时，我们很惊喜，简直像是发现新大陆一样。

你随手翻几页，都能看出来作者真的是用“心”去写的。

作为忠实读者，很幸运能够参与本书的审稿及设计。事实上，对于这样一本难得的好书，相信你看了之后，也会非常乐意帮忙完善得更好。

——五叶草团队

前言

一本好书不仅可以让读者学得轻松，更重要的是可以让读者少走弯路。如果你需要的不是大而全，而是恰到好处的前端开发教程，那么不妨试着看一下这本书。

本书和“从0到1”系列中的其他图书，大多都是源于我在绿叶学习网分享的超人气在线教程。由于教程的风格独一无二、质量很高，因而累计获得超过100000读者的支持。更可喜的是，我收到过几百封的感谢邮件，大多来自初学者、已经工作的前端工程师，还有不少高校老师。

我从开始接触前端开发时，就在记录作为初学者所遇到的各种问题。因此，我非常了解初学者的心态和困惑，也非常清楚初学者应该怎样才能快速而无阻碍地学会前端开发。我用心总结了自己多年的学习和前端开发经验，完全站在初学者的角度而不是已经学会的角度来编写本书。我相信，本书会非常适合零基础的读者轻松地、循序渐进地展开学习。

之前，我问过很多小伙伴，看“从0到1”这个系列图书时是什么感觉。有人回答说：“初恋般的感觉。”或许，本书不一定十全十美，但是肯定会让你有初恋般的怦然心动。

配套习题

每章后面都有习题，这是我和一些有经验的前端工程师精心挑选、设计的，有些来自实际的前端开发工作和面试题。希望小伙伴们能认真完成每章练习，及时演练、巩固所学知识点。习题答案放于本书的配套资源中，具体下载方式见下文。

配套视频课程

为了更好地帮助零基础的小伙伴快速上手，全书每一节都录制了配套的高质量视频，小伙伴们可扫描书中相应位置二维码观看。

配套网站

绿叶学习网（www.lvyestudy.com）是我开发的一个开源技术网站，该网站不仅可以为大家提供丰富的学习资源，还为大家提供了一个高质量的学习交流平台，上面有非常多的技术“大牛”。小伙伴们有任何技术问题都可以在网站上讨论、交流，也可以加QQ群讨论交流：519225291、593173594（只能加一个QQ群）。

配套资源下载及使用说明

本书的配套资源包括习题答案、源码文件、配套PPT教学课件。扫描下方二维码，关注微信公众号“职场研究社”，并回复资源下载验证码（见本书末尾），即可获得资源下载方式。

职场研究社

特别鸣谢

本书的编写得到了很多人的帮助。首先要感谢人民邮电出版社的赵轩编辑和罗芬编辑，有他们的帮助本书才得以顺利出版。

感谢五叶草团队的一路陪伴，感谢韦雪芳、陈志东、秦佳、程紫梦、莫振浩，他们花费了大量时间对本书进行细致的审阅，并给出了诸多非常棒的建议。

最后要感谢我的挚友郭玉萍，她为“从0 到1”系列图书提供了很多帮助。在人生的很多事情上，她也一直在鼓励和支持着我。认识这个朋友，也是我这几年中特别幸运的事。

由于水平有限，书中难免存在不足之处。小伙伴们如果遇到问题或有任何意见和建议，可以发送电子邮件至lvyestudy@foxmail.com，与我交流。此外，也可以访问绿叶学习网（www.lvyestudy.com），了解更多前端开发的相关知识。

作者

第1章 JavaScript简介

1.1 JavaScript是什么

1.1.1 JavaScript简介

JavaScript，就是我们通常所说的JS。这是一种嵌入到HTML页面中的编程语言，由浏览器一边解释一边执行。

我们知道，前端最核心的3个技术是HTML、CSS和JavaScript，如图1-1所示。三者的区别如下。

HTML用于控制网页的结构，CSS用于控制网页的外观，而JavaScript控制着网页的行为。

单纯只有HTML和CSS的页面一般只供用户浏览，而JavaScript的出现，使得用户可以与页面进行交互（如定义各种鼠标效果），让网页实现更多绚丽的效果。拿绿叶学习网来说，二级导航、图片轮播、回顶部等地方都用到了JavaScript，如图1-2所示。HTML和CSS只是描述性的语言，单纯使用这两个没办法做出那些特效，因此必须用编程的方式来实现，也就是使用JavaScript。

1.1.2 教程介绍

很多小伙伴抱怨说JavaScript比较难，整个学习过程不像在学习HTML和CSS时那么顺畅。实际上，对于没有任何编程基础的小伙伴来说，都是一样的。曾经我也是“小白”，所以很清楚小伙伴们的感受。为了更好地帮助大家打好基础，对于很多知识点，我会尽量用简单且易懂的方式进行讲解。还是那句话：“没用的知识绝对不会啰唆，但是重要的知识会反复提醒。”本书不像一些大杂烩似的书一样，上来就一大堆废话，这里的每一句话都值得你去精读。

对于JavaScript部分，有一点需要和大家说明一下：由于IE浏览器外观不错，为了让本书配图更加美观，我们使用IE浏览器来截图。但在实际开发中，我们不建议使用IE浏览器，这一点大家不要误解了。

【解惑】

1.JavaScript与Java有什么关系吗？

很多人看到JavaScript和Java，自然而然就会问：“这两个究竟有什么关系？”其实，它们也是“有一毛钱关系”的，并不能说完全没有关系。

JavaScript最初的确是受Java启发而开始设计的，而且设计的目的之一就是“看上去像Java”，因此语法上它们有不少类似之处，JavaScript的很多名称和命名规则也借自Java。但实际上，JavaScript的主要设计原则源自Self和Scheme。

JavaScript和Java虽然名字相似，但是本质上是不同的，主要体现在以下2个方面。

JavaScript往往都是在网页中使用的，而Java却可以在软件、网页、手机App等各个领域中使用。

从本质上讲，Java是一门面向对象的语言，而JavaScript更像是一门函数式编程语言。

2.我的页面加入了JavaScript特效，那这个页面是静态页面，还是动态页面呢？

不是“会动”的页面就叫动态页面，静态页面和动态页面的区别在于是否与服务器进行数据交互。简单地说，页面是否用到了后端技术（如PHP、JSP、ASP.NET）。下面列出的4种情况都不一定是动态页面。

带有音频和视频。

带有Flash动画。

带有CSS动画。

带有JavaScript动画。

特别提醒大家一下，即使你的页面用了JavaScript，它也不一定是动态页面，除非你还用到了后端技术。

3.对于学习JavaScript，有什么好的建议呢？

JavaScript是当下较流行也是较复杂的一门编程语言，对于JavaScript的学习，我给初学者2个建议。

学完JavaScript入门（也就是本书内容）后，不要急于去学习JavaScript进阶的内容而应该先去学习jQuery。经过jQuery的学习，可以让我们对JavaScript的基础知识有更深一层的理解。学完了jQuery，再去学习JavaScript进阶的内容会更好。

很多人在学习JavaScript的时候，喜欢在第一遍的学习过程中就对每一个细节都“抠”清楚，实际上，这是效率最低的学习方法。在第一遍的学习中，如果有些内容我们实在没办法理解，那就直接跳过，等学到后面或者看第2遍的时候，自然而然就懂了。

1.2 JavaScript开发工具

JavaScript的开发工具有很多，对于初学者来说，我们建议使用HBuilder作为开发工具，下面给大家介绍一下怎么在HBuilder中编写JavaScript。

① 新建Web项目：在HBuilder的左上方，依次点击【文件】→【新建】→【Web项目】，如图1-3所示。

② 选择文件路径以及命名文件夹：在对话框中给文件夹填写一个名字，并且选择文件夹的路径（也就是文件存放的位置），然后单击【完成】按钮，如图1-4所示。

③ 新建JavaScript文件：在HBuilder左侧的项目管理器中，选中test文件夹，然后单击鼠标右键，依次选择【新建】→【JavaScript文件】，如图1-5所示。

④ 选择JavaScript文件路径以及命名JavaScript文件：在对话框中选择JavaScript文件夹的路径（也就是JavaScript文件存放的位置），并且给JavaScript文件填写一个名字，然后单击【完成】按钮，如图1-6所示。

这样就建好了一个JavaScript文件，至于怎么在HTML中使用JavaScript，下一节我们再给小伙伴们详细介绍。

1.3 JavaScript引入方式

在学习JavaScript语法之前，我们首先要知道在哪里写JavaScript。这一节不涉及太多编程方面的知识，而是先给大家介绍一下JavaScript的引入方式。这样大家可以知道在哪里编程，在后面的章节里，我们再给大家详细介绍编程方面的语法。

想要在HTML中引入JavaScript，一般有3种方式。

外部JavaScript。

内部JavaScript。

元素事件JavaScript。

实际上，JavaScript的3种引入方式，跟CSS的3种引入方式（外部样式表、内部样式表、行内样式表）非常相似。大家可以通过对比理解来加深记忆。

1.3.1 外部JavaScript

外部JavaScript，指的是把HTML代码和JavaScript代码单独放在不同的文件中，然后在HTML文档中使用“script标签”来引入JavaScript代码。

外部JavaScript是最理想的JavaScript引入方式。在实际开发中，为了提升网站的性能和可维护性，一般都会使用外部JavaScript。

 语法

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<!--1.在head中引入-->

<script src=”index.js”></script>

</head>

<body>

<!--2.在body中引入-->

<script src="index.js"></script>

</body>

</html>

 说明

在HTML中，我们可以使用“script标签”引入外部JavaScript文件。在script标签中，我们只需用到src这一个属性。src，是“source（源）”的意思，指向的是文件路径。

对于CSS来说，外部CSS文件只能在head中引入。对于JavaScript来说，外部JavaScript文件不仅可以在head中引入，还可以在body中引入。

此外还需要注意一点，引入外部CSS文件使用的是“link标签”，而引入外部JavaScript文件使用的是“script标签”。对于这一点，小伙伴们别搞混了。

 举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<!--引入外部CSS-->

<link rel="stylesheet" type="text/css" href="index.css"/>

<!--引入外部JavaScript-->

<script src="js/index.js"></script>

</head>

<body>

</body>

</html>

 分析

<script src="js/index.js"></script>表示引入文件名为“index.js”的JavaScript文件，其中，文件的路径是"js/index.js"。

1.3.2 内部JavaScript

内部JavaScript，指的是把HTML代码和JavaScript代码放在同一个文件中。其中，JavaScript代码写在<script></script>标签对内。

 语法

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<!--1.在head中引入-->

<script>

……

</script>

</head>

<body>

<!--2.在body中引入-->

<script>

……

</script>

</body>

</html>

 说明

同样地，内部JavaScript文件不仅可以在head中引入，而且可以在body中引入。一般情况下，都是在head中引入。

实际上，“<script></script>”是一种简写形式，它其实等价于如下代码。

<script type="text/javascript">

……

</script>

一般情况下，简写形式用得比较多。对于上面这种写法，我们也需要了解一下，因为不少地方会采用上面这种旧的写法。

 举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

document.write（"绿叶学习网，给你初恋般的感觉~"）;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图1-7所示。

 分析

document.write（）表示在页面输出一个内容，大家先记住这个方法，后面我们会经常用到。

1.3.3 元素属性JavaScript

元素属性JavaScript，指的是在元素的“事件属性”中直接编写JavaScript或调用函数。

举例：在元素事件中编写JavaScript

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

<input type="button" value="按钮" onclick="alert（’绿叶学习，给你初恋般的感觉’）"/>

</body>

</html>

当我们单击按钮后，浏览器预览效果如图1-8所示。

 举例：在元素事件中调用函数

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

function alertMes（）

{

alert（"绿叶学习网，给你初恋般的感觉"）;

}

</script>

</head>

<body>

<input type="button" value="按钮" onclick="alertMes（）"/>

</body>

</html>

当我们单击按钮后，浏览器预览效果如图1-9所示。

 分析

alert（）表示弹出一个对话框，大家先记住这个语句，后面我们会经常用到。

对于在元素属性中引入JavaScript，只需要简单了解就行，也不需要记住语法。在后面的“第11章 事件基础”中，我们再给大家详细介绍。

此外，这一节学习了两个十分有用的方法，这两个方法在后面的章节中会大量用到，这里我们先记一下。

document.write（）：在页面输出一个内容。

alert（）：弹出一个对话框。

1.4 一个简单的JavaScript程序

在学习JavaScript语法之前，先举个例子让小伙伴们感受一下神奇的JavaScript是怎么一回事。

下面这个例子实现的功能：当页面打开时，会弹出对话框，内容为“欢迎光临萌萌小店”；当页面关闭时，也会弹出对话框，内容为“记得下次再来喔”。

实现代码如下。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

window.onload=function（）{

alert（"欢迎光临萌萌小店！"）;

}

window.onbeforeunload=function（event）{

var e=event || window.event;

e.returnValue="记得下来再来喔！";

}

</script>

</head>

<body>

</body>

</html>

刚打开页面的时候，预览效果如图1-10所示。单击右上角的关闭页面，此时预览效果如图1-11所示。

 分析

上面的代码在不同的浏览器中运行得到的效果会不太一样，但功能是一样的。对于这段代码，我们不懂也没关系，这个例子只是让大家感性地认识一下JavaScript是什么样的，可以做点什么，更多具体内容到后面我们会慢慢学到，大家可以在本地编辑器中先测试一下效果。当然，我更建议大家直接下载本书的源代码来测试，本书的源代码的具体下载方式见本书的前言部分。

是不是感觉很有趣？ 那就赶紧投入JavaScript的怀抱吧！

1.5 本章练习

单选题

1.在HTML中嵌入JavaScript，应该使用的标签是（）。

A.<style></style>   

B.<script></script>

C.<js></js>     

D.<javascript></javascript>

2.下面关于JavaScript的语法格式，正确的语句是（）。

A.echo "I love JavaScript!";

B.document.write（I love JavaScript!）;

C.response.write（"I love JavaScript!"）

D.alert（"I love JavaScript!"）;

3.下面有关说法中，正确的是（）。

A.JavaScript其实就是Java，只是叫法不同而已

B.如果一个页面加入JavaScript，那么这个页面就是动态页面

C.在实际开发中，大多数情况下都是使用外部JavaScript

D.内部JavaScript，指的就是把HTML和JavaScript放在不同的文件中

注：本书所有练习题的答案请见本书的配套资源，配套资源的具体下载方式见本书的前言部分。

第2章 法基础

2.1 语法简介

我们平时经常可以在电影中看到黑客飞快地敲着键盘，仅仅几秒钟就控制了整栋大楼的系统，或者化解了一次危机。惊讶之余，小伙伴们有没有想过，自己以后也能学会“编程”这种神奇的技能？

在这一章中，我们开始步入“编程”的神圣殿堂，学习如何用“编程”的方式来改变这个世界。（“程序猿们”都自称是这个星球上最富有使命的物种，他们的梦想就是改变世界。）

人类有很多种语言，如中文、英语、法语等。实际上，计算机也有很多种语言，如C、C++、Java等。简单地说，JavaScript就是众多计算机语言（也叫编程语言）中的一种。跟人类语言类似，计算机语言也有一些共性，如我们可以将用C写的代码转化为用JavaScript写的代码，这就像将英语翻译成中文一样，虽然使用的语言不一样，但是表达出来的意思是一样的。

当我们把JavaScript学完后，再去学习另外一门语言（如C、Java等），就会变得非常容易。因为两门计算机语言之间，是有非常多的共性的。

我们都知道，学习任何一门人类语言，都得学习这门语言的词汇、语法、结构等。同样地，想要学习一门编程语言，也需要学习类似的东西。只不过在编程语言中，不叫词汇、语法、结构，而是叫变量、表达式、运算符等。

在这一章中，我们主要学习JavaScript以下7个方面的语法。

常量与变量。

数据类型。

运算符。

表达式与语句。

类型转换。

转义字符。

注释。

学习JavaScript，说白了，就是学一门计算机能够理解的语言。在学习的过程中，我们尽量将每一个知识点都跟人类语言进行对比，这样大家理解起来就会变得非常简单。当然，计算机语言跟人类语言相比，自身也有很多不一样的特点，因此我们需要认真学习它的语法。

此外，即使小伙伴们有其他编程语言的基础，也建议认真学一遍本书，因为这本书的内容介绍独树一帜，会让你对编程语言有更深一层的理解。

2.2 变量与常量

先问小伙伴们一个问题：学习一门语言，最先要了解的是什么？

当然是词汇，就像学习英语一样，再简单的一句话，我们也得先弄清楚每一个单词是什么意思，然后才知道一句话说的是什么意思。

同样地，学习JavaScript也是如此。下面先来看一句代码。

var a=10;

英语都是一句话一句话地表述的，上面这行代码就相当于JavaScript中的“一句话”，我们称之为“语句”。在JavaScript中，每一条语句都以英文分号（;）作为结束符。每一条语句都有它特定的功能，这个跟英语一样，每一句话都有它表达的意思。

在JavaScript中，变量与常量就像是英语中的词汇。上面代码中的a就是JavaScript中的变量。

2.2.1 变量

在JavaScript中，变量指的是一个可以改变的量。也就是说，变量的值在程序运行过程中是可以改变的。

1.变量的命名

想要使用变量，我们就得先给它起一个名字（命名），就像每个人都有自己的名字一样。当别人喊你的名字时，你就知道别人喊的是你，而不是其他人。

当JavaScript程序需要使用一个变量时，我们只需要使用这个变量的名字就行了。变量的名字一般是不会变的，但是它的值却可以变。这就像人一样，名字一般都是固定下来的，但是每个人都会改变，都会从小孩成长为青年，然后从青年慢慢变成老人。

在JavaScript中，给一个变量命名，我们需要遵循以下2个方面的原则。

变量由字母、下划线、$或数字组成，并且第一个字母必须是字母、下划线或$。

变量不能是系统关键字和保留字。

上面两句话很简单，也非常重要，一定要字斟句酌，认真理解。从第1点可以知道，变量只可以包含字母（大写或小写都行）、下划线、$或数字，不能包含这4种以外的字符（如空格、%、-、*、/等）。因为很多其他的字符都已经被系统当作运算符。

对于第2点，系统关键字，指的是JavaScript本身“已经在使用”的名字，我们在给变量命名的时候，是不能使用这些名字的（因为系统要用）。保留字，指的是JavaScript本身“还没使用”的名字，虽然没有使用，但是它们有可能在将来会被使用，所以先保留。JavaScript的关键字和保留字如表2-1、表2-2和表2-3所示。

这里列举了JavaScript常见的关键字和保留字，以方便小伙伴们查询，这里不要求大家记忆。实际上，对于这些关键字，等学到后面，小伙伴们自然而然也就认得了。就算不认得，等需要用的时候再回到这里查一下就行了。

 举例：正确的命名

i

lvye_study

_lvye

$str

n123

 举例：错误的命名

123n　　　　//不能以数字开头

-study　　　//不能以中划线开头

my-title　　//不能包含中划线

continue　　//不能跟系统关键字相同

此外，变量的命名一定要区分大小写，如变量“age”与变量“Age”在JavaScript中是两个不同的变量。

2.变量的使用

在JavaScript中，如果想要使用一个变量，我们一般需要两步。

第1步，变量的声明。

第2步，变量的赋值。

对于变量的声明，小伙伴们记住一句话：所有JavaScript变量都由var声明。在这一点上，JavaScript跟C、Java等语言是不同的。

 语法

var 变量名=值；

 说明

变量的使用语法如图2-1所示。

 举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

var a=10;

document.write（a）;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-2所示。

 分析

在这个例子中，我们使用var来定义一个变量，变量名为a，变量的值为10。然后使用document.write（）方法输出这个变量的值。

对于变量的命名，我们尽量采用一些有意义的英文名或英文缩写。当然，为了讲解方便，本书有些变量的命名比较简单。在实际开发中，我们尽量不要太随便。

此外，一个var也可以同时声明多个变量名，其中，变量名之间必须用英文逗号（,）隔开，举例如下。

var a=10,b=20,c=30;

实际上，上面的代码等价于下面的代码。

var a=10;

var b=20;

var c=30;

 举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

var a=10;

a=12;

document.write（a）;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-3所示。

 分析

咦，a的值不是10吗？怎么输出12呢？大家别忘了，a是一个变量。变量，简单地说就是一个值会发生改变的量，因此“a=12”会覆盖“a=10”。我们再来看一个例子，就能有更深的理解了。

 举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

var a=10;

a=a+1;

document.write（a）;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-4所示。

 分析

“a = a +1”表示a的最终值是在原来a的基础上加1，因此a的最终值为11（10+1=11）。下面的代码中，a的最终值是5，小伙伴们可以思考一下为什么。

var a=10;

a=a+1;

a=a-6;

2.2.2 常量

在JavaScript中，常量指的是一个不能改变的量。也就是说，常量的值从定义开始就是固定的，一直到程序结束都不会改变。

常量，形象地说，就像是千百年来约定俗成的名称，这个名称是定下来的，不能随便改变。

在JavaScript中，我们可以把常量看作一种特殊的变量，之所以特殊，是因为它的值是不会变的。一般情况下，常量名全部采用大写形式，这样一看就知道这个值很特殊，有特殊用途，如var DEBUG = 1。

程序是会变化的，因此变量比常量有用得多。常量在JavaScript的初学阶段用得比较少，我们简单了解即可，不需要过于深入。

2.3 数据类型

所谓的数据类型，指的就是图2-5中“值”的类型。在JavaScript中，数据类型可以分为两种：一种是“基本数据类型”，另外一种是“引用数据类型”。其中，基本数据类型只有一个值，而引用数据类型可以含有多个值。

在JavaScript中，基本数据类型有5种：数字、字符串、布尔值、未定义值和空值。常见的引用数据类型只有一种：对象（数组也是属于对象的一种）。这一节我们先介绍基本数据类型，在后面的章节中再来介绍对象这种引用数据类型。

2.3.1 数字

在JavaScript中，数字是最基本的数据类型。所谓的数字，指的就是我们数学上的数字，如10、-10、3.14等。

JavaScript中的数字是不区分“整型（int）”和“浮点型（float）”的。小伙伴们记住这一句话就可以了：在JavaScript中，所有变量都用var来声明。

 举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

var n=1001;

document.write（n）;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-6所示。

2.3.2 字符串

字符串，从名字上看就很好理解，就是一串字符。在JavaScript中，字符串都是用英文单引号或英文双引号（注意都是英文）括起来的。

单引号括起来的一个或多个字符，如下所示。

'我’

'绿叶学习网’

双引号括起来的一个或多个字符，如下所示。

"我"

"绿叶学习网"

单引号括起来的字符串中可以包含双引号，如下所示。

'我来自"绿叶学习网" '

双引号括起来的字符串中可以包含单引号，如下所示。

"我来自’绿叶学习网’"

 举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

var str="绿叶，给你初恋般的感觉~";

document.write（str）;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-7所示。

 分析

如果我们把字符串两边的引号去掉，就会发现页面不会输出内容了，小伙伴们可以自己试一试。因此，对于一个字符串来说，一定要加上引号，单引号或双引号都可以。

var str="绿叶，给你初恋般的感觉~";

document.write（str）;

对于上面这两句代码，也可以直接用下面一句代码来实现，因为document.write（）这个方法本身就是用来输出一个字符串的。

document.write（"绿叶，给你初恋般的感觉~"）;

 举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

var str=’绿叶，给你"初恋"般的感觉~';

document.write（str）;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-8所示。

 分析

在用单引号括起来的字符串中，不能含有单引号，只能含有双引号。同样的道理，在用双引号括起来的字符串中，也不能含有双引号，只能含有单引号。

为什么要这么规定？我们看看下面这句代码就知道了。字符串中含有4个双引号，此时JavaScript无法判断哪两个双引号是一对的。

"绿叶，给你"初恋"般的感觉~"

 举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

var n="1001";

document.write（n）;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-9所示。

 分析

如果给数字加上双引号，JavaScript会把这个数字当作“字符串”来处理，而不是当作“数字”来处理。我们都知道，数字是可以进行加减乘除运算的，但是加上双引号的数字一般是不可以进行数学意义上的加减乘除运算的，因为这个时候它不再是数字，而是一个字符串。至于数字和字符串的区别，我们在下一节中会详细介绍。

1001　　//这是一个数字

"1001"　//这是一个字符串

2.3.3 布尔值

在JavaScript中，数字和字符串这两个类型的值可以有无数个，但是布尔类型的值只有两个：true和false。true表示“真”,false表示“假”。

有些小伙伴可能觉得很奇怪，为什么这种数据类型叫“布尔值”？这一个名字是怎么来的？实际上，布尔是“bool”的音译，是以英国数学家、布尔代数的奠基人乔治·布尔（George Boole）的名字来命名的。

布尔值最大的用途：选择结构的条件判断。对于选择结构，我们在下一章会给大家详细介绍，这里只需要简单了解一下就行。

 举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

var a=10;

var b=20;

if（a < b）

{

document.write（"a小于b"）;

}

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-10所示。

 分析

在这个例子中，我们首先定义了两个数字类型的变量：a、b。然后在if语句中对a和b进行大小判断，如果a小于b，会返回true，并且通过document.write（）方法输出一个字符串："a小于b"。其中，if语句是用来进行条件判断的，我们在下一章会详细介绍。

2.3.4 未定义值

在JavaScript中，未定义值指的是一个变量虽然已经用var声明了，但是并没有对这个变量进行赋值，此时该变量的值就是“未定义值”。其中，未定义值用undefined表示。

 举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

var n;

document.write（n）;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-11所示。

 分析

凡是已经用var声明但没有赋值的变量，值都是undefined。关于undefined，后面我们会慢慢接触到。

2.3.5 空值

数字、字符串等数据在定义的时候，系统都会分配一定的内存空间。在JavaScript中，空值用null表示。如果一个变量的值等于null，如“var n = null”，则表示系统没有给这个变量n分配内存空间。

对于内存分配这个概念，非计算机专业的小伙伴可能理解起来比较困难，不过没关系，我们只需要简单认识一下就可以了。

null跟undefined非常相似，但是也有一定的区别，这里我们不需要深入。对于这些高级部分的知识，可以关注绿叶学习网的JavaScript进阶教程。

经过这一节的学习，我们也清楚地知道“数据类型”是什么了。数据类型，就是值的类型。

2.4 运算符

在JavaScript中，要完成各种各样的运算，是离不开运算符的。运算符用于将一个或几个值连接起来进行运算，从而得出所需要的结果值。就像在数学中，也需要使用加减乘除这些运算符才可以进行运算。对于JavaScript来说，我们需要遵循计算机语言运算的一套方法。

在JavaScript中，运算符指的是“变量”或“值”进行运算操作的符号。例如，图2-12中的“+”就是一种运算符。常见的运算符有以下5种。

算术运算符。

赋值运算符。

比较运算符。

逻辑运算符。

条件运算符。

2.4.1 算术运算符

i=1;

在JavaScript中，算术运算符一般用于实现“数学”运算，包括加、减、乘、除等，如表2-4所示。

在JavaScript中，乘号是星号（*），而不是（×），除号是斜杠（/），而不是（÷），所以小伙伴们不要搞混了。为什么要这样定义？这是因为JavaScript这门语言的开发者，希望尽量使用键盘已有的符号来表示这些运算符，大家看看自己的键盘就明白了。

对于算术运算符，我们需要重点掌握这3种：加法运算符、自增运算符、自减运算符。

1.加法运算符

在JavaScript中，加法运算符并没有想象中的那么简单，我们需要注意3点。

数字+数字=数字。

字符串+字符串=字符串。

字符串+数字=字符串。

也就是说，当一个数字加上另外一个数字时，运算规则跟数学上的相加一样，举例如下。

var num=10+5;　　　　　　　　　　//num的值为15

当一个字符串加上另外一个字符串时，运算规则是将两个字符串连接起来，举例如下。

var str="从0到1"+"系列图书";　　//str的值为"从0到1系列图书"

当一个字符串加上一个数字时，JavaScript会将数字变成字符串，然后再连接起来，举例如下。

var str="今年是"+2018　　　　　　 //str的值为"今年是2018"（这是一个字符串）

 举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

var a=10+5;

var b="从0到1"+"系列图书";

var c="今年是"+2018;

document.write（a+"<br/>"+b+"<br/>"+c）;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-13所示。

 分析

在这个例子中，可能有些小伙伴不懂“document.write（a + "<br/>" + b + "<br/>" + c）;”这一句代码的意思。实际上，这一句代码等价于如下代码。

document.write（"15<br/>从0到1系列图书<br/>今年是2018"）;

小伙伴们根据上面的加法运算符的3个规则，认真思考一下，就会觉得很简单了。如果你想往字符串里面“塞点东西”，可以用加号连接，然后用英文引号断开来处理，这是经常使用的一个技巧，这个技巧也叫作“字符串拼接”。

 举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

var str="2018"+1000;

document.write（str）;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-14所示。

 分析

"2018"是一个字符串，而不是数字，大家不要被表象给“欺骗”啦！

举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

var a=10;

var b=4;

var n1=a+b;

var n2=a-b;

var n3=a * b;

var n4=a /b;

var n5=a % b;

document.write（"a+b="+n1+"<br/>"）;

document.write（"a-b="+n2+"<br/>"）;

document.write（"a*b="+n3+"<br/>"）;

document.write（"a/b="+n4+"<br/>"）;

document.write（"a%b="+n5）;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-15所示。

 分析

注意，"a+b="、"a-b="、"a*b="等由于加上了英文双引号，所以都是字符串。

2.自增运算符

双加号（++）是自增运算符，表示在“原来的值”的基础上再加上1。i++等价于i=i+1，自增运算符的使用有以下两种情况。

i++

i++指的是在使用i之后，再让i的值加上1，举例如下。

i=1;

j=i++;

上面这段代码等价于下面的代码。

j=i;

i=i+1;

因此，上面执行的结果：i=2,j=1。

++i

“++i”指的是在使用i之前，先让i的值加上1，举例如下。

i=1;

j=++i;

上面这段代码等价于下面的代码。

i=1;

i=i+1;　　//i=1+1，也就是i=2了

j=i;　　　//由于此时i的值变为2了，所以j为2

因此，上面执行的结果：i=2,j=2。

对于j=++i和j=i++，小伙伴们一定要分清楚。可以这样简单记忆：++在i的左边（前面），就是先使用i=i+1，而后使用j=i;++在i的右边（后面），就是后使用i=i+1，而先使用j=i。i=i+1的使用位置，是根据++的使用位置来决定的。

3.自减运算符

双减号（--）是自减运算符，表示在“原来的值”的基础上再减去1。i--等价于i=i-1，自减运算符的使用同样也有以下两种情况。

i-

“i--”指的是在使用i之后，再让i的值减去1，举例如下。

i=1;

j=i--;

上面这段代码等价于下面的代码。

i=1;

j=i;

i=i-1;

因此，上面执行的结果：i=0,j=1。

--i

“--i”指的是在使用i之前，先让i的值减去1，举例如下。

i=1;

j=--i;

上面这段代码等价于下面的代码。

i=1;

i=i-1;　　//i=1-1，也就是i=0了

j=i;　　　//由于此时i的值变为0了，所以j为0

因此，上面执行的结果：i=0,j=0。

“--”与“++”的使用方法是一样的，大家可以对比理解一下。

2.4.2 赋值运算符

在JavaScript中，赋值运算符用于将右边的表达式的值保存到左边的变量中，如表2-5所示。

上面我们只列举了常用的赋值运算符，不常用的没有列举，以免增加小伙伴们的记忆负担。在这本书中，内容的介绍原则是不常用的不会啰唆，重要的则会反复强调。

var a+=b；其实就是var a=a+b；的简化形式，+=、-=、*=、/=这几个运算符就是为了简化代码而使用的，大多数有经验的开发人员都喜欢使用这种简写形式。对于初学者来说，我们还是要熟悉一下这种写法，以免看不懂别人的代码。

 举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

var a=10;

var b=5;

a+=b;

b+=a;

document.write（"a的值是"+a+"<br/>b的值是"+b）;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-16所示。

 分析

首先我们初始化变量a的值为10，变量b的值为5。当执行a+=b后，此时a的值为15（10+5=15）,b的值没有变化，依旧是5。

程序是从上而下执行的，当执行b+=a；时，由于之前a的值已经变为15了，因此执行后，a的值为15,b的值为20（15+5=20）。

这里小伙伴们要知道一点：a和b都是变量，它们的值会随着程序的执行而变化。

2.4.3 比较运算符

在JavaScript中，比较运算符用于将运算符两边的值或表达式进行比较，如果比较的结果是对的，则返回true；如果比较的结果是错的，则返回false。true和false是布尔值，前面我们已经介绍过了。常用的比较运算符如表2-6所示。

等号（=）是赋值运算符，用于将右边的值赋值给左边的变量。双等号（==）是比较运算符，用于比较左右两边的值是否相等。如果想要比较两个值是否相等，写成a=b是错误的，正确的写法应该是a==b。很多初学者都会犯这个低级错误，这个“坑”已经给大家指出来了，以后就不要再勇敢地往前踩啦！

 举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

var a=10;

var b=5;

var n1=（a > b）;

var n2=（a==b）;

var n3=（a !=b）;

document.write（"10>5:"+n1+"<br/>"）;

document.write（"10==5:"+n2+"<br/>"）;

document.write（"10!=5:"+n3）;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-17所示。

 分析

对于一条语句，都是先运算等号的右边，然后再将右边的结果赋值给左边的变量。

2.4.4 逻辑运算符

在JavaScript中，逻辑运算符用于执行“布尔值的运算”，它常常和比较运算符结合在一起使用。常见的逻辑运算符有3种，如表2-7所示。

1.“与”运算

在JavaScript中，与运算用双与号（&&）表示。如果双与号（&&）两边的值都为true，则结果返回true；如果有一个为false或者两个都为false，则结果返回false。

真&&真→真

真&&假→假

假&&真→假

假&&假→假

 举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

var a=10;

var b=5;

var c=5;

var n=（a < b）&&（b==c）;

document.write（n）;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-18所示。

 分析

“var n = （a < b） && （b == c）;”等价于“var n = （10 < 5） && （5 == 5）;”，由于（10 < 5）的返回结果为false，而（5==5）的返回结果为true，所以“var n = （a < b） && （b == c）;”最终等价于“var n = false&&true;”。根据与运算的规则，n最终的值为false。

2.“或”运算

在JavaScript中，或运算用双竖线（||）表示。如果双竖线（||）两边的值都为false，则结果返回false；如果有一个为true或者两个都为true，则结果返回true。

真||真→真

真||假→真

假||真→真

假||假→假

 举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

var a=10;

var b=5;

var c=5;

var n=（a < b）||（b==c）;

document.write（n）;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-19所示。

 分析

“var n = （a < b） ||（b == c）;”等价于“var n = （10 < 5） || （5 == 5）;”，由于（10 < 5）的返回结果为false，而（5==5）的返回结果为true，所以“var n = （a < b） || （b == c）;”最终等价于“var n = false||true;”。根据或运算的规则，n最终的值为true。

3.“非”运算

在JavaScript中，非运算用英文叹号（!）表示。非运算跟与运算、或运算不太一样，非运算操作的对象只有一个。当英文叹号（!）右边的值为true时，最终结果为false；当英文叹号（!）右边的值为false时，最终结果为true。

!真→假

!假→真

这个其实很简单，直接取反就行，这“家伙”就是专门跟你唱反调的。

 举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

var a=10;

var b=5;

var c=5;

var n=!（a < b）&& !（b==c）;

document.write（n）;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-20所示。

 分析

“var n = !（a < b） && !（b == c）;”等价于“var n =!（10 < 5） && !（5 == 5）;”，也就是“var n = !false&&!true;”。由于！false的值为true,!true的值为false。因此最终等价于“var n = true&&false;”，也就是false。

当我们把var n = !（a < b） && !（b == c）；这句代码中的&&换成||后，返回结果为true，小伙伴们可以自行测试一下。此外，我们也不要被这些看起来复杂的运算吓到了。实际上，再复杂的运算，一步一步来分析，也是非常简单的。

对于与运算、或运算和非运算，我们可以总结出以下5点。

true的！为false,false的！为true。

a&&b：当a、b全为true时，结果为true，否则结果为false。

a||b：当a、b全为false时，结果为false，否则结果为true。

a&&b：系统会先判断a，再判断b。如果a为false，则系统不会再去判断b。

a||b：系统会先判断a，再判断b。如果a为true，则系统不会再去判断b。

最后两条是非常有用的技巧，在后续的学习中我们会经常碰到，这里简单认识一下即可。

2.4.5 条件运算符

除了上面这些常用的运算符，JavaScript还为我们提供了一种特殊的运算符：条件运算符。条件运算符，也叫作“三目运算符”。在JavaScript中，条件运算符用英文问号（?）表示。

 语法

var a=条件 ？ 表达式1 ：表达式2;

 说明

当条件为true时，我们选择的是“表达式1”，也就是“var a = 表达式1”；当条件为false时，我们选择的是“表达式2”，也就是“var a = 表达式2”。注意，a只是一个变量名，这个变量名可以换成你自己想要的其他符号要求的名字。

条件运算符其实很简单，相当于“二选一”。就好比有两个女生在你面前，也许你都喜欢，但你只能选择其中一个做女朋友。

 举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

var result=（2 > 1）? "小芳" : "小美";

document.write（result）;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-21所示。

 分析

由于条件（2>1）返回true，所以最终选择的是“小芳”。

2.5 表达式与语句

一个表达式包含“操作数”和“操作符”两部分。操作数可以是变量，也可以是常量。操作符指的就是我们之前学的运算符。每一个表达式都会产生一个值。

语句，简单地说就是用英文分号（;）分开的代码。一般情况下，一个分号对应一个语句。

在上面的这个例子中，“1+2”是一个表达式，而整一句代码“var a=1+2;”就是一个语句。

对于初学者来说，不用纠结什么是表达式，什么是语句。对于表达式和语句，我们可以简单地认为“语句就是JavaScript的一句话”，而“表达式就是一句话的一部分”。一个表达式加上一个分号就可以组成一个语句，如图2-22所示。

2.6 类型转换

类型转换，指的是将“一种数据类型”转换为“另外一种数据类型”。数据类型，我们在2.3节给大家介绍过了。在2.4节，我们讲到，如果一个数字与一个字符串相加，则JavaScript会自动将数字转换成字符串，然后再与另外一个字符串相加，如"2018"+1000的结果是"20181000"，而不是3018。其中，“JavaScript会自动将数字转换成字符串”指的就是类型转换。

在JavaScript中，共有两种类型转换。

隐式类型转换。

显式类型转换。

隐式类型转换，指的是JavaScript自动进行的类型转换。显式类型转换，指的是需要我们手动用代码强制进行的类型转换。这两种类型转换方式，我们从名字上就能区分开来。

对于隐式类型转换，这里就不做介绍了，大家只需要把“2.4 运算符”这一节中的加号运算符涉及的内容认真学习一遍就可以了。在接下来的这一节中，我们重点介绍显式类型转换的两种情况。

2.6.1 “字符串”转换为“数字”

在JavaScript中，想要将字符串转换为数字，有两种方式。

Number（）。

parseInt（）和parseFloat（）。

Number（）方法可以将任何“数字型字符串”转换为数字。那么，什么是数字型字符串？如"123"和"3.1415"，这些只有数字的字符串就是数字型字符串，而"hao123"和"100px"这样的就不是。

准确地说，parseInt（）和parseFloat（）可以提取“首字母为数字的任意字符串”中的数字，其中，parseInt（）会提取整数部分，parseFloat（）不仅会提取整数部分，还会提取小数部分。

 举例：Number（）

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

var a=Number（"2018"）+1000;

document.write（a）;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-23所示。

 分析

根据前面的学习可以知道，"2018"+1000的结果是"20181000"。在这里，我们通过使用Number（）方法，将"2018"转换为一个数字，因此Number（"2018"）+1000的结果是3018。

 举例：Number（）

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

document.write（"Number（'123'）:"+Number（"123"）+"<br/>"）;

document.write（"Number（'3.1415'）:"+Number（"3.1415"）+"<br/>"）;

document.write（"Number（'hao123'）:"+Number（"hao123"）+"<br/>"）;

document.write（"Number（'100px'）:"+Number（"100px"））;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-24所示。

 分析

NaN指的是“Not a Number（非数字）”，从中可以看出，Number（）方法只能将纯“数字型字符串”转换为数字，不能将其他字符串（即使字符串内有数字字符）转换为数字。在实际开发中，很多时候我们需要提取类似"100px"这种字符串中的数字，这个时候我们就应该使用parseInt（）和parseFloat（），而不是Number（）。

 举例：parseInt（）

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

document.write（"parseInt（'123'）:"+parseInt（"123"）+"<br/>"）;

document.write（"parseInt（'3.1415'）:"+parseInt（"3.1415"）+"<br/>"）;

document.write（"parseInt（'hao123'）:"+parseInt（"hao123"）+"<br/>"）;

document.write（"parseInt（'100px'）:"+parseInt（"100px"））;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-25所示。

 分析

从这个例子可以看出来，parseInt（）会对字符串从左到右进行判断。如果第1个字符是数字，则继续判断，直到出现非数字为止（小数点也是非数字）；如果第1个字符是非数字，则直接返回NaN。

 举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

document.write（"parseInt（'+123'）:"+parseInt（"+123"）+"<br/>"）;

document.write（"parseInt（'-123'）:"+parseInt（"-123"））;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-26所示。

 分析

前面我们说过，对于parseInt（）来说，如果第1个字符不是数字，会返回NaN。这里的第1个字符是加号（+）或减号（-），也就是非数字，但parseInt（）同样也是可以转换的。因为加号和减号在数学上其实就是表示一个数的正和负，所以parseInt（）可以接受第1个字符是加号或减号。同样地，parseFloat（）也有这个特点。

 举例：parseFloat（）

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

document.write（"parseFloat（'123'）:"+parseFloat（"123"）+"<br/>"）;

document.write（"parseFloat（'3.1415'）:"+parseFloat（"3.1415"）+"<br/>"）;

document.write（"parseFloat（'hao123'）:"+parseFloat（"hao123"）+"<br/>"）;

document.write（"parseFloat（'100px'）:"+parseFloat（"100px"））;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-27所示。

 分析

parseFloat（）跟parseInt（）类似，都是从字符串第1个字符从左到右开始判断。如果第1个字符是数字，则继续判断，直到出现除了数字和小数点之外的字符为止；如果第1个字符是非数字，则直接返回NaN。

在首字母是+、-或数字的字符串中，不管是整数部分，还是小数部分，parseFloat（）都可以转换，这一点跟parseInt（）是不一样的。

2.6.2 “数字”转换为“字符串”

在JavaScript中，想要将数字转换为字符串，也有两种方式。

与空字符串相加。

toString（）。

 举例：与空字符串相加

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

var a=2018+"";

var b=a+1000;

document.write（b）;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-28所示。

 分析

如果数字和字符串相加，系统会将数字转换成字符串。如果要将一个数字转换为字符串，而又不增加多余的字符，我们可以将这个数字加上一个空字符串。

 举例：toString（）

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

var a=2018;

var b=a.toString（）+1000;

document.write（b）;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-29所示。

 分析

a.toString（）表示将a转换为字符串，也就是将2018转换为"2018"，因此最终b的值为"20181000"。

在实际开发中，如果想要将数字转换为字符串，我们很少使用toString（）方法，使用更多的是隐式类型转换的方式（也就是直接跟一个字符串相加）。

2.7 转义字符

在学习转义字符之前，我们先来看一个例子。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

document.write（"绿叶，给你初恋般的感觉~"）;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-30所示。

如果我们想要实现图2-31所示的效果，该怎么做？

不少小伙伴首先想到的，可能就是使用下面这句代码来实现。

document.write（"绿叶，给你"初恋"般的感觉~"）;

试过的小伙伴肯定会疑惑：怎么在页面上没有输出内容呢？其实大家仔细观察一下就知道，双引号都是成对出现的，这句代码中有4个双引号，JavaScript无法判断前后哪两个双引号是一对的。为了避免这种情况发生，JavaScript引入了转义字符。

在默认情况下，某些字符在浏览器是无法显示的，为了能够让这些字符能够显示出来，我们可以使用这些字符对应的转义字符来代替。在JavaScript中，常见的转义字符如表2-8所示。

实际上，JavaScript中的转义字符很多，但是我们只需要记住上面3种就可以了。此外还需要特别说明一下，对于字符串的换行，有以下两种情况。

  如果是在document.write（）中换行，则应该用<br/>。

  如果是在alert（）中换行，则应该用\n。

 举例：document.write（）中的换行

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

document.write（"绿叶，<br/>初恋般的感觉~"）;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-32所示。

 举例：alert（）中的换行

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

alert（"绿叶，\n初恋般的感觉"）;

</script>

</head>

<body>

</body>

</html>

浏览器预览效果如图2-33所示。

 分析

\n是转义字符，一般用于对话框文本的换行，这里如果使用<br/>就无法实现了。

2.8 注释

在JavaScript中，为一些关键代码进行注释是非常有必要的。注释的好处很多，如方便理解、方便查找或方便项目组里的其他开发人员了解你的代码，而且也方便以后你对自己的代码进行修改。

2.8.1 单行注释

当注释的内容比较少，只有一行时，我们可以采用单行注释的方式。

 语法

//单行注释

 说明

小伙伴们要特别注意，HTML注释、CSS注释和JavaScript注释是不一样的。此外，并不是所有代码都需要注释，一般情况下，只需要对一些关键代码进行注释。

 举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<style type="text/css">

/*这是CSS注释*/

body{color:Red;}

</style>

<script>

//这是JavaScript注释（单行）

document.write（"不要把无知当个性"）;

</script>

</head>

<body>

<!--这是HTML注释-->

<div></div>

</body>

</html>

浏览器预览效果如图2-34所示。

 分析

从上面我们知道，被注释的内容是不会在浏览器中显示出来的。

2.8.2 多行注释

当注释的内容比较多，用一行表达不出来时，我们可以采用多行注释的方式。

 语法

/*多行注释*/

 说明

有小伙伴可能会说，HTML注释、CSS注释和JavaScript注释都不一样，而JavaScript还分单行注释和多行注释，记不住啊！其实我们不需要去记忆，稍微有个印象就可以了，因为开发工具都有代码高亮的提示功能。在实际开发中，要是忘记了，在编辑器中测试一下就知道了。

 举例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<script>

/*

这是JavaScript注释（多行）

这是JavaScript注释（多行）

这是JavaScript注释（多行）

*/

document.write（"不要把无知当个性"）;

</script>

</head>

<body>

<div></div>

</body>

</html>

浏览器预览效果如图2-35所示。

 分析

当然，即使注释的内容只有一行，我们也可以采用多行注释的方式。

2.9 本章练习

单选题

1.下面的JavaScript变量名中，合法的是（）。

A.666variable  

B.my_variable 

C.function   

D.-variable

2.parseFloat（18.98）返回的值是（）。

A.18   

B.19   

C.18.98 

D."18.98"

3.下面不属于JavaScript基本数据类型的是（）。

A.字符串 

B.布尔值 

C.undefined   

D.对象

4.下面的选项中，属于JavaScript正确的注释方式是（）。（选两项）

A.//注释内容   

 B./*注释内容*/

C.<!--注释内容-->   

 D./注释内容/

5.document.write（"\"复仇者\"联盟"）；这句代码的输出结果是（）。

A.复仇者联盟   

 B."复仇者"联盟

C.\"复仇者\"联盟   

 D.语法有误，程序报错

6.下面有一段JavaScript程序，输出的结果是（）。

var str="101中学”;

document.write（parseInt（str））;

A.NaN 

B.101  

C.101中学   

D.程序报错

7.下面哪一个表达式将会返回false?（）

A.!（3<=1）     

B.（4>=4）&&（5<=2）

C.（"a"=="a"）&&（"c"!="d"） 

D.（2<3）||（3<2）

8.下面有一段JavaScript程序，运行之后变量c的值为（）。

var a,b,c;

a="2";

b=2;

c=a+b;

A.4   

B."4"   

D."22"

C.22   

9.下面有一段JavaScript程序，运行之后变量y的值为（）。

var x,y;

x=10;

y=x++;

A.9   

B.10   

C.11     

D.undefined