《JavaScript和jQuery实战手册(原书第2版)》——2.5节操作数据类型和变量

简介: 本节书摘来自华章社区《JavaScript和jQuery实战手册(原书第2版)》一书中的第2章,第2.5节操作数据类型和变量,作者:David Sawyer McFarland,更多章节内容可以访问云栖社区“华章社区”公众号查看

2.5 操作数据类型和变量
在一个变量中存储数值或字符串这样的特定信息,通常只是程序中的第一步。大多数程序还操作数据以得到新的结果。例如,为分数增加一个数值以加分,把订购的商品的数目乘上商品的价格得到一个总金额,或者在一条通用性的消息末尾添加一个名字来把它个性化,例如,得到“Good to see you again, Igor”。JavaScript提供了各种操作符来修改数据。操作符只是一个符号或单词,用来把一个或多个值修改为其他的值。例如,可以使用+符号(加法操作符)把数值相加。对于不同的数据类型,有不同类型的操作符。
2.5.1 基本算术
JavaScript支持基本的算术运算,例如加法、除法、减法等。表2-2展示了基本的算术操作符及其使用方法。


2037a0edd5790d1e74b9bfc8bcc338850696403f

你可能习惯了使用一个×表示乘法(例如4×5),但是在JavaScript中,使用*符号把两个数相乘。
也可以在算术运算中使用变量。既然变量只是数值或字符串这样的值的一个容器,使用变量就等同于使用变量的内容。

var price = 10;
var itemsOrdered = 15;
var totalCost = price * itemsOrdered;
头两行代码创建了两个变量(price和itemsOrdered),并且在每个变量中存储了一个值。第三行代码创建了另一个变量(totalCost),并且把变量price中存储的值(10)和变量itemsOrdered中存储的值(15)相乘的结果存储在其中。在这个例子中,总数(150)存储在变量totalCost中。
这段示例代码还展示了变量的有用之处。假设我们编写一个程序作为一个电子商务Web站点的购物车系统的一部分。在这个程序中,我们需要使用一种特定商品的价格来做各种计算。可以在整个程序中使用实际的价格来编码(例如,假设商品的价格是10元,那么,在用到价格的每个地方都输入10)。然而,如果价格发生变化,我们必须找到使用该价格的每一行代码并进行修改。另外,通过使用变量,可以在程序开始的某个地方设置产品的价格。随后,如果价格发生变化,我们只需要修改定义了产品价格的那一行代码,就可以在整个程序中更新价格:
var price = 20;
var itemsOrdered = 15;
var totalCost = price * itemsOrdered;

还有很多其他的方法来操作数值(我们将从14.3节开始学习这些方法),但是,你会发现最常用的基本算术操作符都在表2-2中列出了。

2.5.2 操作的顺序
如果同时执行几个数学运算,例如,把几个数值相加然后把总和乘以10,我们需要记住JavaScript解释器执行计算的顺序。一些操作符比其他的操作符优先级高,因此,它们会先计算。如果不注意的话,这一事实可能会产生不想要的结果。例如:

4 + 5 * 10

我们可能认为这会直接从左向右计算,4+5等9,9 10等于90。事实不是这样的。实际上先计算乘法,因此,表达式5 10等于50,加上4等于54。乘法(*符号)和除法(/符号)的优先级高于加法(+)和减法(-)。
要确保数学运算按照想要的方式进行,可以使用圆括号组合运算。例如,把上面的表达式重写为下面这样:

(4 + 5) * 10
任何在括号中执行的数学运算都首先进行,因此,在这个例子中,4加上5首先计算并得到结果9,然后乘以10。如果你想要让乘法先进行,显然,要像下面这样编写代码:
4 + (5*10);

2.5.3 组合字符串
组合两个或多个字符串来得到一个单独的字符串,这是一项常见的编程任务。例如,如果Web页面有一个表单,它在一个字段里收集一个人的名字并且在另一个字段里收集他的姓氏,我们需要把两个字段组合起来得到他的完整名字。更进一步,如果想要显示一条消息让用户知道他的表单信息已经提交,我们需要用人的名字和通用性的消息组合起来,得到 “John Smith, thanks for your order.”。
组合字符串的操作叫做连接,并且使用+操作符完成。是的,这和用来把两个数值相加的+操作符相同,但是,对于字符串,+执行不同的操作。下面是一个例子:

var firstName = 'John';
var lastName = 'Smith';
var fullName = firstName + lastName;
在上面代码段的最后一行中,变量的firstName内容和变量lastName的内容组合(或连接)到一起,两个字符串直接连接到一起,结果放置到变量fullName中。在这个例子里,结果字符串是“JohnSmith”,两个名字之间没有空格,因为连接只是把字符串连到一起。在很多情况下(例如这个例子),我们需要在想要组合的字符串之间添加一个空格:
var firstName = 'John';
var lastName = 'Smith';
var fullName = firstName + ' ' + lastName;

上述代码段的最后一行中的' '是一个单引号后面跟着一个空格,然后是一个结束单引号。这段代码只是一个包含了空格的字符串。在这个例子中,当把这个字符串放置于两个变量之间的时候,它产生了一个字符串“John Smith”。最后的一个例子也展示了可以一次性组合两个以上的字符串,在这个例子中,我们组合了3个字符串。
注意: 记住,变量只是一个容器,它能够保存任何类型的数据,例如,一个字符串或一个数值。因此,当你组合两个字符串变量的时候(firstName + lastName),这和将两个字符串连接起来(‘John’ + ‘Smith’)是一样的。
2.5.4 组合数值和字符串
大多数算术操作符仅对数值有意义。例如,把2和字符串'eggs'相乘没有任何意义。如果尝试这个例子,最终将得到一个特殊的JavaScript值NaN,它表示“不是一个数值”。然而,有的时候,我们可能想要把一个字符串和数值组合起来。例如,假设我们想要在Web页面上显示一条消息,指出访问者已经访问Web站点多少次。他访问的次数是一个数值,但是,这条消息是一个字符串。在这种情况下,我们使用+操作符来做两件事情:把一个数值转换为一个字符串,并且将它和另一个字符串组合起来。下面是一个例子:

var numOfVisits = 101;
var message = 'You have visited this site ' + numOfVisits + ' times.';

在这个例子中,message包含了字符串“You have visited this site 101 times”。JavaScript解释器认出了这其中包含了一个字符串,因此,它意识到,这不是要做任何数学运算(不是加法)。相反,它把+当做连接操作符,并且同时意识到这个数值也应该转换为一个字符串。
这个例子似乎是在同一条消息里显示文字和数值的一种好方法。在这个例子中,数值显然是组成完整句子的一连串字母的一部分,并且,无论何时对一个字符串值和一个数值使用+操作符,JavaScript解释器都会把数值转换为一个字符串。
这种功能叫做自动类型转换,然而,它可能会引发问题。例如,如果访问者在表单上通过输入数值(例如2)来回答一个问题(“你想要多少双鞋”),输入值被当做一个字符串'2'。那么,你会遇到这样一种情况:

var numOfShoes = '2';
var numOfSocks = 4;
var totalItems = numOfShoes + numOfSocks;

我们期待totalItems中存储的结果是6(两双鞋+4双袜子)。相反,由于numOfShoes中的值是一个字符串,JavaScript解释器把变量numOfSocks中的值也转换为一个字符串,并且,我们最终在变量totalItems中得到了字符串'24'。有几种方法可以防止这种错误:
首先,把+添加到包含数值的字符串的开始,例如:

var numOfShoes = '2';
var numOfSocks = 4;
var totalItems = +numOfShoes + numOfSocks;

在一个变量的前面添加+符号(确保变量和+符号之间没有空格),这就告诉JavaScript解释器尝试把字符串转换为数值,如果字符串像'2'一样只包含数值,我们最终把这个字符串转换成了一个数值。在这个例子中,我们最终得到6(2 + 4)。另一种技术是使用Number()命令,如下所示:

var numOfShoes = '2';
var numOfSocks = 4;
var totalItems = Number(numOfShoes) + numOfSocks;

Number()在可能的情况下把一个字符串转换为数值(如果字符串只是字母且不是数值,我们会得到一个NaN值,表示不能把字母转换为一个数值)。
通常,在获取页面访问者的输入时最常遇到作为字符串的数值,例如,获取访问者输入一个表单字段中的值。因此,如果你需要使用一个表单的输入或访问者输入的其他信息来做加法运算,确保首先对它使用Number()命令。
注意:只有在将一个数值和包含数值的一个字符串相加的时候,才会发生这个问题。如果你试图将变量numOfShoes和包含数值的一个变量(例如,shoePrice)相乘,JavaScript解释器将会把numOfShoes中的字符串转换为一个数值,然后将其与变量shoePrice相乘。
2.5.5 修改变量中的值
变量很有用,因为它们可以存储随着程序运行而变化的值,例如,随着游戏的进行而改变的分数。那么,我们怎么修改变量的值呢?如果想要替换一个变量中的值,就给该变量赋一个新值。例如:

var score = 0;
score = 100;

然而,我们通常想要保持变量中的值,并且只是以某种方式给它添加些东西或者改变它。例如,对于一个游戏分数,我们不想只是给一个新的分数,总是想从当前分数中增加或减去一个值。要增加变量的值,可以使用这个变量的名字作为操作的一部分,如下所示:

var score = 0;
score = score + 100;

最后一行代码乍看上去有些令人混淆,但是,它使用了一种非常常见的技术。它是这么工作的:=号右边的所有操作首先进行,即score + 100部分先执行。翻译过来,它的含义是“取出score中当前存储的值(0)并且给它加上100”。这个操作的结果随后又存储回变量score中。这两行代码的最终结果是,变量score现在拥有了值100。
同样的逻辑也适用于其他的算术操作符,例如减法、除法或乘法:

score = score - 10;
score = score * 10;
score = score / 10;

实际上,对一个变量中的值执行数学运算,然后把结果存储回该变量非常简单, 4种主要的运算都有快捷方式来完成这一操作,参见表2-3。
![image](https://yqfile.alicdn.com/9b8d08e58c190453d027b2165ae9a938be429561.png" >

相关文章
|
7天前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
7天前
|
存储 JavaScript 前端开发
【JavaScript技术专栏】JavaScript基础入门:变量、数据类型与运算符
【4月更文挑战第30天】本文介绍了JavaScript的基础知识,包括变量(var、let、const)、数据类型(Number、String、Boolean、Undefined、Null及Object、Array)和运算符(算术、赋值、比较、逻辑)。通过实例展示了如何声明变量、操作数据类型以及使用运算符执行数学和逻辑运算。了解这些基础知识对初学者至关重要,是进阶学习JavaScript的关键。
|
1天前
|
JavaScript 前端开发 安全
javascript操作DOM的方法
javascript操作DOM的方法
|
1天前
|
JavaScript 前端开发
javascript操作BOM的方法
javascript操作BOM的方法
|
1天前
|
JavaScript 前端开发 容器
js操作dom元素
js操作dom元素
7 0
|
1天前
|
存储 JavaScript 前端开发
js的变量以及运算
js的变量以及运算
8 1
|
1天前
|
JavaScript 前端开发
关于js变量
关于js变量
10 1
|
1天前
|
JavaScript 前端开发 索引
js操作字符串的方法
js操作字符串的方法
10 2
|
1天前
|
JavaScript 前端开发
js的变量
js的变量
10 2
|
5天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?