JavaScript---未完待续

1. JS 使用

<script>标签

在 HTML 中,JavaScript 代码必须位于 标签之间。
能够在 HTML 文档中放置任意数量的脚本。
脚本可被放置与 HTML 页面的 或 部分中,或兼而有之。

1.1 head中的 JavaScript

在本例中,JavaScript 函数被放置于 HTML 页面的 部分。
该函数会在按钮被点击时调用:
实例

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

1.2 body中的 JavaScript

在本例中,JavaScript 函数被放置于 HTML 页面的 部分。

该函数会在按钮被点击时调用:
实例

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

提示:把脚本置于 元素的底部,可改善显示速度,因为脚本编译会拖慢显示。
外部脚本

脚本可放置与外部文件中:

1.3 外部文件:myScript.js

function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}

外部脚本很实用,如果相同的脚本被用于许多不同的网页。
JavaScript 文件的文件扩展名是 .js。
如需使用外部脚本,请在

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

可以在 或 中放置外部脚本引用。

外部 JavaScript 的优势

在外部文件中放置脚本有如下优势:

分离了 HTML 和代码
使 HTML 和 JavaScript 更易于阅读和维护
已缓存的 JavaScript 文件可加速页面加载

如需向一张页面添加多个脚本文件 - 请使用多个 script 标签:
实例

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

1.4 外部引用

可通过完整的 URL 或相对于当前网页的路径引用外部脚本:
本例使用完整的 URL 来链接至脚本:
实例
<script src="https://www.w3school.com.cn/js/myScript1.js"></script>
本例使用了位于当前网站上指定文件夹中的脚本:
<script src="/js/myScript1.js"></script>
本例链接了与当前页面相同文件夹的脚本:
<script src="myScript1.js"></script>

2. JS 输出

2.1JavaScript 显示方案

JavaScript 能够以不同方式“显示”数据:

使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台
2.1.1 使用 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 中显示数据的常用方法。

2.1.2 使用 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() 方法仅用于测试。

2.1.3 使用 window.alert()

您能够使用警告框来显示数据:
实例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html> 
2.1.4 使用 console.log()

在浏览器中,您可使用 console.log() 方法来显示数据。

请通过 F12 来激活浏览器控制台,并在菜单中选择“控制台”。
实例

<!DOCTYPE html>
<html>
<body>

<h1>我的第一张网页</h1>

<p>我的第一个段落</p>

<script>
console.log(5 + 6);
</script>

</body>
</html>

3. JS 语句

在 HTML 中,JavaScript 语句是由 web 浏览器“执行”的“指令”。
实例

var x, y, z;	// 语句 1
x = 22;		// 语句 2
y = 11;		// 语句 3
z = x + y;	// 语句 4

亲自试一试

3.1 JavaScript 程序

计算机程序是由计算机“执行”的一系列“指令”。在编程语言中,这些编程指令被称为语句。
JavaScript 程序就是一系列的编程语句。
注释:在 HTML 中,JavaScript 程序由 web 浏览器执行。

3.1.1 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;

您可能在网上看到不带分号的例子。
提示:以分号结束语句不是必需的,但我们仍然强烈您这么做。

3.1.2 JavaScript 空白字符

JavaScript 会忽略多个空格。您可以向脚本添加空格,以增强可读性。

下面这两行是相等的:

var person = "Bill";
var person="Bill"; 

在运算符旁边( = + - * / )添加空格是个好习惯:

var x = y + z;

JavaScript 行长度和折行

为了达到最佳的可读性,程序员们常常喜欢把代码行控制在 80 个字符以内。

如果 JavaScript 语句太长,对其进行折行的最佳位置是某个运算符:
实例

document.getElementById("demo").innerHTML =
 "Hello Kitty.";
3.1.3 JavaScript 代码块

JavaScript 语句可以用花括号({…})组合在代码块中。代码块的作用是定义一同执行的语句。
您会在 JavaScript 中看到成块组合在一起的语句:
实例

function myFunction() {
    document.getElementById("demo").innerHTML = "Hello Kitty.";
    document.getElementById("myDIV").innerHTML = "How are you?";
}

注释:在本教程中我们为代码块用了 4 个空格的缩进。

提示:您将稍后在本教程中学到更多有关函数的内容。

3.1.4 JavaScript 关键词

JavaScript 语句常常通过某个关键词来标识需要执行的 JavaScript 动作。
下面的表格列出了一部分将在教程中学到的关键词:

关键词描述
break终止 switch 或循环。
continue跳出循环并在顶端开始。
debugger停止执行 JavaScript,并调用调试函数(如果可用)。
do … while执行语句块,并在条件为真时重复代码块。
for标记需被执行的语句块,只要条件为真。
function声明函数。
if … else标记需被执行的语句块,根据某个条件。
return退出函数。
switch标记需被执行的语句块,根据不同的情况。
try … catch对语句块实现错误处理。
var声明变量。

4. JS 语法

JavaScript 语法是一套规则,它定义了 JavaScript 的语言结构。

var x, y; // 如何声明变量
x = 7; y = 8; // 如何赋值
z = x + y; // 如何计算值

4.1JavaScript 值

1.JavaScript 语句定义两种类型的值:混合值和变量值。
混合值被称为字面量(literal)。变量值被称为变量。

2.JavaScript 对大小写敏感

3.注释:JavaScript 中不能使用连字符。它是为减法预留的。
下划线:
first_name, last_name, master_card, inter_city.

4.JavaScript 程序员倾向于使用以小写字母开头的驼峰大小写:
firstName, lastName, masterCard, interCity

5. JS 数据类型

字符串值,数值,布尔值,数组,对象。

5.1 JavaScript 拥有动态类型。

这意味着相同变量可用作不同类型:
实例

var x;               // 现在 x 是 undefined
var x = 7;           // 现在 x 是数值
var x = "Bill";      // 现在 x 是字符串值

5.2 数值类型

超大或超小的数值可以用科学计数法来写:
实例

var y = 123e5;      // 12300000
var z = 123e-5;     // 0.00123

5.3 JavaScript 对象

JavaScript 对象用花括号来书写。

对象属性是 name:value 对,由逗号分隔。
实例

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

上例中的对象(person)有四个属性:firstName、lastName、age 以及 eyeColor。

5.4 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 中数组属于对象。

5.5 Undefined

在 JavaScript 中,没有值的变量,其值是 undefined。typeof 也返回 undefined。
实例

var person;                  // 值是 undefined,类型是 undefined

任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。
实例

person = undefined;          // 值是 undefined,类型是 undefined

5.6 空值

空值与 undefined 不是一回事。

空的字符串变量既有值也有类型。
实例

var car = "";                // 值是 "",类型是 "string"

5.7 Null

在 JavaScript 中,null 是 “nothing”。它被看做不存在的事物。

不幸的是,在 JavaScript 中,null 的数据类型是对象。

您可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null。

您可以通过设置值为 null 清空对象:
实例

var person = null;           // 值是 null,但是类型仍然是对象

您也可以通过设置值为 undefined 清空对象:
实例

var person = undefined;     // 值是 undefined,类型是 undefined

5.8 Undefined 与 Null 的区别

Undefined 与 null 的值相等,但类型不相等:

typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true

5.9 复杂数据

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 中数组即对象。

6. JS 事件

HTML 事件是发生在 HTML 元素上的“事情”。

当在 HTML 页面中使用 JavaScript 时,JavaScript 能够“应对”这些事件。
HTML 事件

HTML 事件可以是浏览器或用户做的某些事情。

下面是 HTML 事件的一些例子:

HTML 网页完成加载
HTML 输入字段被修改
HTML 按钮被点击

通常,当事件发生时,用户会希望做某件事。

JavaScript 允许您在事件被侦测到时执行代码。

通过 JavaScript 代码,HTML 允许您向 HTML 元素添加事件处理程序。

使用单引号:

<element event='一些 JavaScript'>

使用双引号:

<element event="一些 JavaScript">

在下面的例子中,onclick 属性(以及代码)被添加到 元素:
实例

<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 事件:

事件描述
onchangeHTML 元素已被改变
onclick用户点击了 HTML 元素
onmouseover用户把鼠标移动到 HTML 元素上
onmouseout用户把鼠标移开 HTML 元素
onkeydown用户按下键盘按键
onload浏览器已经完成页面加载

7. JS 字符串

字符串方法帮助您处理字符串。

7.1 字符串方法和属性

原始值,比如“Bill Gates”,无法拥有属性和方法(因为它们不是对象)。

但是通过 JavaScript,方法和属性也可用于原始值,因为在执行方法和属性时 JavaScript 将原始值视为对象。

7.2 字符串长度

length 属性返回字符串的长度:
实例

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

7.3 查找字符串中的字符串

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);

7.4 检索字符串中的字符串

search() 方法搜索特定值的字符串,并返回匹配的位置:
实例

var str = "The full name of China is the People's Republic of China.";
var pos = str.search("locate");

两种方法,indexOf() 与 search(),是相等的。

这两种方法是不相等的。区别在于:

search() 方法无法设置第二个开始位置参数。
indexOf() 方法无法设置更强大的搜索值(正则表达式)。

7.5 提取部分字符串

有三种提取部分字符串的方法:

slice(start, end)
substring(start, end)
substr(start, length)
7.5.1 slice() 方法

slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。

该方法设置两个参数:起始索引(开始位置),终止索引(结束位置)。

这个例子裁剪字符串中位置 7 到位置 13 的片段:
实例

var str = "Apple, Banana, Mango";
var res = str.slice(7,13);

res 的结果是:

Banana

如果某个参数为负,则从字符串的结尾开始计数。
这个例子裁剪字符串中位置 -12 到位置 -6 的片段:
实例

var str = "Apple, Banana, Mango";
var res = str.slice(-13,-7);

res 的结果是:

Banana

如果省略第二个参数,则该方法将裁剪字符串的剩余部分:
实例

var res = str.slice(7);

或者从结尾计数:
实例

var res = str.slice(-13);

提示:负值位置不适用 Internet Explorer 8 及其更早版本。

7.5.2 substring() 方法

substring() 类似于 slice()。

不同之处在于 substring() 无法接受负的索引。
实例

var str = "Apple, Banana, Mango";
var res = str.substring(7,13);

res 的结果是:

Banana

如果省略第二个参数,则该 substring() 将裁剪字符串的剩余部分。

7.5.3 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);

res 的结果是:

Banana, Mango

如果首个参数为负,则从字符串的结尾计算位置。
实例

var str = "Apple, Banana, Mango";
var res = str.substr(-5);

res 的结果是:

Mango

第二个参数不能为负,因为它定义的是长度。

7.6 替换字符串内容

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:
实例

str = "Please visit Microsoft!";
var n = str.replace("MICROSOFT", "W3School");

如需执行大小写不敏感的替换,请使用正则表达式 /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");
7.7 转换为大写和小写

通过 toUpperCase() 把字符串转换为大写:
实例

var text1 = "Hello World!";       // 字符串
var text2 = text1.toUpperCase();  // text2 是被转换为大写的 text1

通过 toLowerCase() 把字符串转换为小写:
实例

var text1 = "Hello World!";       // 字符串
var text2 = text1.toLowerCase();  // text2 是被转换为小写的 text1
7.8 concat() 方法

concat() 连接两个或多个字符串:
实例

var text1 = "Hello";
var text2 = "World";
text3 = text1.concat(" ",text2);

concat() 方法可用于代替加运算符。下面两行是等效的:
实例

var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");

所有字符串方法都会返回新字符串。它们不会修改原始字符串。

正式地说:字符串是不可变的:字符串不能更改,只能替换。

7.9 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());
7.10 提取字符串字符

这是两个提取字符串字符的安全方法:

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(""); 

8. JS 数值

8.1 数字和字符串相加

警告!!

JavaScript 的加法和级联(concatenation)都使用 + 运算符。

数字用加法。字符串用级联。

1.如果您对两个数相加,结果将是一个数:
实例

var x = 10;
var y = 20;
var z = x + y;           // z 将是 30(一个数)

2.如果对两个字符串相加,结果将是一个字符串的级联:
实例

var x = "10";
var y = "20";
var z = x + y;           // z 将是 1020(字符串)

3.如果您对一个数和一个字符串相加,结果也是字符串级联:
实例

var x = 10;
var y = "20";
var z = x + y;           // z 将是 1020(一个字符串)

4.如果您对一个字符串和一个数字相加,结果也是字符串级联:
实例

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” 被级联。

8.2 数字字符串

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 用 + 运算符对字符串进行了级联。

8.3 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"

亲自试一试

8.4 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"

8.5 十六进制

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

8.6 数值可以是对象

通常 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 对象无法进行比较。

9.JavaScript 数值方法

Number 方法帮助您处理数值。

9.1 Number 方法和属性

原始值(比如 3.14 或 2016),无法拥有属性和方法(因为它们不是对象)。

但是通过 JavaScript,方法和属性也可用于原始值,因为 JavaScript 在执行方法和属性时将原始值视作对象。

9.1.1 toString() 方法

toString() 以字符串返回数值

所有数字方法可用于任意类型的数字(字面量、变量或表达式):
实例

var x = 123;
x.toString();            // 从变量 x 返回 123
(123).toString();        // 从文本 123 返回 123
(100 + 23).toString();   // 从表达式 100 + 23 返回 123
9.1.2 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 不会对数字进行舍入。

9.1.3 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) 非常适合处理金钱。

9.1.4 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

亲自试一试

9.1.5 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 方法。

9.2 全局方法

JavaScript 全局方法可用于所有 JavaScript 数据类型。

这些是在处理数字时最相关的方法:

方法描述
Number()返回数字,由其参数转换而来。
parseFloat()解析其参数并返回浮点数。
parseInt()解析其参数并返回整数。
9.2.1 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 日至今的毫秒数。

9.2.2 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)。

9.2.3 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表示无穷大(溢出返回)。
9.2.4 JavaScript MIN_VALUE 和 MAX_VALUE

MAX_VALUE 返回 JavaScript 中可能的最大数字。
实例

var x = Number.MAX_VALUE;

MIN_VALUE 返回 JavaScript 中可能的最小数字。
实例

var x = Number.MIN_VALUE;

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;

9.3 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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值