文章目录
- toString() 方法
- toExponential() 方法
- toFixed() 方法
- toPrecision() 方法
- valueOf() 方法
- Number() 方法
- 用于日期的 Number() 方法
- parseInt() 方法
- parseFloat() 方法
为什么学习JS
JavaScript 是 web 开发者必学的三种语言之一：
HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程
如何使用
在 HTML 中，JavaScript 代码必须位于 标签之间。
<script> document.getElementById("demo").innerHTML = "我的第一段 JavaScript"; </script>
JS输出
JavaScript 显示方案
JavaScript 能够以不同方式“显示”数据：
使用 window.alert() 写入警告框
<!DOCTYPE html> <html> <body> <h1>我的第一张网页</h1> <p>我的第一个段落</p> <script> document.write(5 + 6); </script> </body> </html>
使用 document.write() 写入 HTML 输出
<!DOCTYPE html> <html> <body> <h1>我的第一张网页</h1> <p>我的第一个段落</p> <button οnclick="document.write(5 + 6)">试一试</button> </body> </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>
使用 console.log() 写入浏览器控制台
<!DOCTYPE html> <html> <body> <h1>我的第一张网页</h1> <p>我的第一个段落</p> <script> console.log(5 + 6); </script> </body> </html>
JS语句
JavaScript 语句
JavaScript 语句由以下构成：
值、运算符、表达式、关键词和注释。
这条语句告诉浏览器在 id=“demo” 的 HTML 元素中输出 “Hello Kitty.”：
<!DOCTYPE html> <html> <body> <h2>JavaScript 语句</h2> <p>在 HTML 中，JavaScript 语句由浏览器执行。</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "Hello Kitty."; </script> </body> </html>
分号
如果有分号分隔，允许在同一行写多条语句：
a = 5; b = 6; c = a + b;
空白字符
JavaScript 会忽略多个空格。您可以向脚本添加空格，以增强可读性。
下面这两行是相等的：
var person = "Bill"; var person="Bill";
代码块
JavaScript 语句可以用花括号（{…}）组合在代码块中。
代码块的作用是定义一同执行的语句。
您会在 JavaScript 中看到成块组合在一起的语句：
function myFunction() { document.getElementById("demo").innerHTML = "Hello Kitty."; document.getElementById("myDIV").innerHTML = "How are you?"; }
关键词
JS语法
字面量
JavaScript 语句定义两种类型的值：混合值和变量值。
混合值被称为字面量（literal）。变量值被称为变量。
字符串是文本，由双引号或单引号包围：
"Bill Gates" 'Bill Gates'
关键词
JavaScript 关键词用于标识被执行的动作。
var 关键词告知浏览器创建新的变量：
var x = 7 + 8; var y = x * 10;
标识符
标识符是名称。
在 JavaScript 中，标识符用于命名变量（以及关键词、函数和标签）。
在大多数编程语言中，合法名称的规则大多相同。
在 JavaScript 中，首字符必须是字母、下划线（-）或美元符号（$）。
连串的字符可以是字母、数字、下划线或美元符号。
提示：数值不可以作为首字符。这样，JavaScript 就能轻松区分标识符和数值。
注：所有 JavaScript 标识符对大小写敏感。
变量 lastName 和 lastname，是两个不同的变量。
js 注释
单行注释
单行注释以 // 开头。
任何位于 // 与行末之间的文本都会被 JavaScript 忽略（不会执行）。
多行注释
多行注释以 /* 开头，以 */ 结尾。
任何位于 /* 和 */ 之间的文本都会被 JavaScript 忽略。
JS变量
一条语句，多个变量
您可以在一条语句中声明许多变量。
以 var 作为语句的开头，并以逗号分隔变量：
var person = "Bill Gates", carName = "porsche", price = 15000;
声明可横跨多行：
var person = "Bill Gates", carName = "porsche", price = 15000;
Value = undefined
在计算机程序中，被声明的变量经常是不带值的。值可以是需被计算的内容，或是之后被提供的数据，比如数据输入。
不带有值的变量，它的值将是 undefined。
变量 carName 在这条语句执行后的值是 undefined：
重复声明 JavaScript 变量
如果再次声明某个 JavaScript 变量，将不会丢它的值。
在这两条语句执行后，变量 carName 的值仍然是 “porsche”
JS let
ECMAScript 2015
ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const。
全局作用域
全局（在函数之外）声明的变量拥有全局作用域。
var carName = "porsche"; // 此处的代码可以使用 carName function myFunction() { // 此处的代码也可以使用 carName }
函数作用域
局部（函数内）声明的变量拥有函数作用域。
// 此处的代码不可以使用 carName function myFunction() { var carName = "porsche"; // code here CAN use carName } // 此处的代码不可以使用 carName
JavaScript 块作用域
通过 var 关键词声明的变量没有块作用域。
在块 {} 内声明的变量可以从块之外进行访问。
{ var x = 10; } // 此处可以使用 x
在 ES2015 之前，JavaScript 是没有块作用域的。
可以使用 let 关键词声明拥有块作用域的变量。
在块 {} 内声明的变量无法从块外访问：
{ let x = 10; } // 此处不可以使用 x
重新声明变量
使用 var 关键字重新声明变量会带来问题。
在块中重新声明变量也将重新声明块外的变量：
var x = 10; // 此处 x 为 10 { var x = 6; // 此处 x 为 6 } // 此处 x 为 6
循环作用域
在循环中使用 var：
var i = 7; for (var i = 0; i < 10; i++) { // 一些语句 } // 此处，i 为 10
JS const
块作用域
在块作用域内使用 const 声明的变量与 let 变量相似。
在本例中，x 在块中声明，不同于在块之外声明的 x：
var x = 10; // 此处，x 为 10 { const x = 6; // 此处，x 为 6 } // 此处，x 为 10
在声明时赋值
JavaScript const 变量必须在声明时赋值：
const PI = 3.14159265359;
常量对象可以更改
您可以更改常量对象的属性：
// 您可以创建 const 对象： const car = {type:"porsche", model:"911", color:"Black"}; // 您可以更改属性： car.color = "White"; // 您可以添加属性： car.owner = "Bill";
常量数组可以更改
您可以更改常量数组的元素：
// 您可以创建常量数组： const cars = ["Audi", "BMW", "porsche"]; // 您可以更改元素： cars[0] = "Honda"; // 您可以添加元素： cars.push("Volvo");
但是您无法重新为常量数组赋值：
const cars = ["Audi", "BMW", "porsche"]; cars = ["Honda", "Toyota", "Volvo"]; // ERROR
重新声明使用条件
var x = 2; // 允许 var x = 3; // 允许 x = 4; // 允许
在同一作用域或块中，不允许将已有的 var 或 let 变量重新声明或重新赋值给 const：
var x = 2; // 允许 const x = 2; // 不允许 { let x = 2; // 允许 const x = 2; // 不允许 }
在同一作用域或块中，为已有的 const 变量重新声明声明或赋值是不允许的：
const x = 2; // 允许 const x = 3; // 不允许 x = 3; // 不允许 var x = 3; // 不允许 let x = 3; // 不允许 { const x = 2; // 允许 const x = 3; // 不允许 x = 3; // 不允许 var x = 3; // 不允许 let x = 3; // 不允许 }
在另外的作用域或块中重新声明 const 是允许的：
const x = 2; // 允许 { const x = 3; // 允许 } { const x = 4; // 允许 }
提升
通过 var 定义的变量会被提升到顶端。如果您不了解什么是提升（Hoisting），请学习提升这一章。
您可以在声明 var 变量之前就使用它：
carName = "Volvo"; // 您不可以在此处使用 carName const carName = "Volvo";
JS运算符
JavaScript 字符串运算符
- 运算符也可用于对字符串进行相加（concatenate，级联）。
`txt1 = "Bill"; txt2 = "Gates"; txt3 = txt1 + " " + txt2; `
字符串和数字的相加
x = 7 + 8; y = "7" + 8; z = "Hello" + 7;
类型运算符
JS数组类型
字符串值，数值，布尔值，数组，对象。
JavaScript 数据类型
JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等：
var length = 7; // 数字 var lastName = "Gates"; // 字符串 var cars = ["Porsche", "Volvo", "BMW"]; // 数组 var x = {firstName:"Bill", lastName:"Gates"}; // 对象
数据类型概念
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"
Undefined
var person; // 值是 undefined，类型是 undefined。
Null
在 JavaScript 中，null 是 “nothing”。它被看做不存在的事物。
不幸的是，在 JavaScript 中，null 的数据类型是对象。
您可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null。
您可以通过设置值为 null 清空对象：var person = null; // 值是 null，但是类型仍然是对象
您也可以通过设置值为 undefined 清空对象：
var person = undefined; // 值是 undefined，类型是 undefined。
Undefined 与 Null 的区别
typeof undefined // undefined typeof null // object null === undefined // false null == undefined // true
复杂数据
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"
JS事件
HTML 事件
HTML 事件可以是浏览器或用户做的某些事情。
下面是 HTML 事件的一些例子：
HTML 网页完成加载
HTML 输入字段被修改
HTML 按钮被点击
JS字符串
字符串长度
内建属性 length 可返回字符串的长度：
`var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; var sln = txt.length;`
转义字符
特殊字符
长代码行换行
\ 方法并不是 ECMAScript (JavaScript) 标准。
某些浏览器也不允许 \ 字符之后的空格。
对长字符串换行的最安全做法（但是有点慢）是使用字符串加法：
document.getElementById("demo").innerHTML = "Hello" + "Kitty!";
字符串方法
查找字符串中的字符串
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("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");
slice() 方法
slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）。
这个例子裁剪字符串中位置 7 到位置 13 的片段：
var str = "Apple, Banana, Mango"; var res = str.slice(7,13);
substring() 方法
substring() 类似于 slice()。
不同之处在于 substring() 无法接受负的索引。
var str = "Apple, Banana, Mango"; var res = str.substring(7,13);
substr() 方法
substr() 类似于 slice()。
不同之处在于第二个参数规定被提取部分的长度。
var str = "Apple, Banana, Mango"; var res = str.substr(7,6);
替换字符串内容
replace() 方法用另一个值替换在字符串中指定的值：
str = "Please visit Microsoft!"; var n = str.replace("Microsoft", "W3School");
转换为大写和小写
通过 toUpperCase() 把字符串转换为大写：
var text1 = "Hello World!"; // 字符串 var text2 = text1.toUpperCase(); // text2 是被转换为大写的 text1
concat() 方法
concat() 连接两个或多个字符串：
var text = "Hello" + " " + "World!"; var text = "Hello".concat(" ","World!");
String.trim()
trim() 方法删除字符串两端的空白符：
提取字符串字符
这是两个提取字符串字符的安全方法：
charAt(position)
charCodeAt(position)`
`var str = "HELLO WORLD"; str.charAt(0); // 返回 H
charCodeAt() 方法
charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码：
var str = "HELLO WORLD"; str.charCodeAt(0); // 返回 72
把字符串转换为数组
可以通过 split() 将字符串转换为数组：
var txt = "a,b,c,d,e"; // 字符串 txt.split(","); // 用逗号分隔 txt.split(" "); // 用空格分隔 txt.split("|"); // 用竖线分隔
字符串搜索
String.indexOf()
indexOf() 方法返回指定文本在字符串中第一次出现（的位置）的索引：
实例
let str = "Please locate where 'locate' occurs!"; str.indexOf("locate") // 返回 7
String.lastIndexOf()
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：
实例
let str = "Please locate where 'locate' occurs!"; str.lastIndexOf("locate") // 返回 21
String.search()
search() 方法在字符串中搜索指定值并返回匹配的位置：
实例
let str = "Please locate where 'locate' occurs!"; str.search("locate") // 返回 7
String.match()
match() 方法根据正则表达式在字符串中搜索匹配项，并将匹配项作为 Array 对象返回。
实例 1
在字符串中搜索 “ain”：
let text = "The rain in SPAIN stays mainly in the plain"; text.match(/ain/g) // 返回数组 [ain,ain,ain]
String.includes()
如果字符串包含指定值，includes() 方法返回 true。
实例
let text = "Hello world, welcome to the universe."; text.includes("world") // 返回 true
String.startsWith()
如果字符串以指定值开头，则 startsWith() 方法返回 true，否则返回 false：
实例
let text = "Hello world, welcome to the universe."; text.startsWith("Hello") // 返回 true
String.endsWith()
如果字符串以指定值结尾，则 endsWith() 方法返回 true，否则返回 false：
实例
检查字符串是否以 “Gates” 结尾：
var text = "Bill Gates"; text.endsWith("Gates") // 返回 true
字符串模板
变量替换
模板字面量允许字符串中的变量：
实例
let firstName = "Bill"; let lastName = "Gates"; let text = `Welcome ${firstName}, ${lastName}!`;
表达式替换
模板字面量允许字符串中的表达式：
实例
let price = 10; let VAT = 0.25; let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
HTML 模板
实例
let header = "Templates Literals"; let tags = ["template literals", "javascript", "es6"]; let html = `<h2>${header}</h2><ul>`; for (const x of tags) { html += `<li>${x}</li>`; } html += `</ul>`;
JS数字
数字
数字和字符串相加
警告！！
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（字符串）
var x = 10; var y = 20; var z = "The result is: " + x + y;//1020 var x = 10; var y = 20; var z = "30"; var result = x + y + z;//3030
NaN - 非数值
NaN 属于 JavaScript 保留词，指示某个数不是合法数。
尝试用一个非数字字符串进行除法会得到 NaN（Not a Number）：
实例
var x = 100 / "Apple"; // x 将是 NaN（Not a Number）
Infinity
Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值。
实例
var myNumber = 2; while (myNumber != Infinity) { // 执行直到 Infinity myNumber = myNumber * myNumber; }
数值可以是对象
通常 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 有相等的值
数字方法
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
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
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 方法可用于将变量转换为数字：
Number() 方法
parseInt() 方法
parseFloat() 方法
这些方法并非数字方法，而是全局 JavaScript 方法。
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
用于日期的 Number() 方法
Number() 还可以把日期转换为数字：
实例
Number(new Date("2019-04-15")); // 返回 1506729600000
parseInt() 方法
parseInt() 解析一段字符串并返回数值。允许空格。只返回首个数字：
实例
parseInt("10"); // 返回 10 parseInt("10.33"); // 返回 10 parseInt("10 20 30"); // 返回 10 parseInt("10 years"); // 返回 10 parseInt("years 10"); // 返回 NaN
parseFloat() 方法
parseFloat() 解析一段字符串并返回数值。允许空格。只返回首个数字：
实例
parseFloat("10"); // 返回 10 parseFloat("10.33"); // 返回 10.33 parseFloat("10 20 30"); // 返回 10 parseFloat("10 years"); // 返回 10 parseFloat("years 10"); // 返回 NaN
