（web前端学习笔记）JavaScript基础
JavaScript基础
- 一、JS简介
- 1、什么是JavaScript
- 2、JavaScript的组成
- 3、JavaScript的能力
- 4、JavaScript的优点
- 二、JS使用与输出
- 1、JS使用
- 1.1、< script> 标签
- 1.2、< head> 或 < body> 中的 JavaScript
- 1.3、外部脚本
- 1.4、外部引用
- 2、JS输出
- 2.1、使用 innerHTML
- 2.2、使用 document.write()
- 2.3、使用 window.alert()
- 2.4、使用 console.log()
- 三、JS语法
- 1、JavaScript 变量
- 2、JavaScript 标识符
- 3、JavaScript 数据类型
- 4、JavaScript 关键词
- 四、JS函数
- 1、JavaScript 函数语法
- 2、函数调用
- 3、函数返回
- 五、JS对象
- 1、对象定义
- 2、对象方法
- 3、访问对象属性、方法
- 4、this 关键词
- 六、JS字符串、数字
- 1、JavaScript 字符串
- 1.1、\ 转义字符
- 1.2、字符串对象
- 1.3、字符串方法
- 1.31、字符串长度
- 1.32、查找字符串中的字符串
- 1.33、提取部分字符串
- 1.34、替换字符串内容
- 1.35、转换为大写和小写
- 1.36、concat() 方法
- 1.37、String.trim()
- 1.38、提取字符串字符
- 1.39、属性访问
- 1.310、把字符串转换为数组
- 2、JavaScript 数字
- 2.1、JavaScript 数值
- 2.2、数字和字符串相加
- 2.3、数字字符串
- 2.4、NaN - 非数值
- 2.5、Infinity
- 2.6、JavaScript 数值方法
- 2.61、toString() 方法
- 2.62、toExponential() 、toFixed() 、toPrecision()
- 七、JavaScript 正则表达式
- 1、修饰符
- 2、方括号
- 3、元字符
- 4、量词
- 5、常用正则表达式
一、JS简介
1、什么是JavaScript
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。
JavaScript 是一门弱类型的动态脚本语言，支持多种编程范式，包括面向对象和函数式编程，被广泛用于 Web 开发。
基本特点：
- 是一种运行在浏览器上的解释性脚本语言（代码不进行预编译）
- 主要用来向HTML页面添加交互行为。
- 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。
两者的关系就像：周杰与周杰伦，雷锋与雷锋塔。
Java（由 Sun 发明）是更复杂的编程语言。
JavaScript 由Netscape（网景）公司的 Brendan Eich 发明。Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。
JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。
2、JavaScript的组成
完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型（DOM），浏览器对象模型（BOM）。
ECMAScript：描述该语言的语法和基本对象，是JavaScript的标准，目前的版本为ES6。
文档对象模型（DOM）：描述处理网页内容的方法和接口。
浏览器对象模型（BOM），描述与浏览器进行交互的方法和借口。
3、JavaScript的能力
JavaScript常用来完成以下任务：
- 嵌入动态文本于HTML页面
- 对浏览器事件作出响应
- 读写HTML元素
- 在数据被提交到服务器之前验证数据
- 检测访客的浏览器信息
4、JavaScript的优点
(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。
(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支持JavaScript脚本语言,JavaScript已被大多数的浏览器所支持。
二、JS使用与输出
1、JS使用
1.1、< script> 标签
在 HTML 中，JavaScript 代码必须位于 < script> 与 < /script> 标签之间。
<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
script>
注：旧的 JavaScript 例子也许会使用 type 属性：< script type=“text/javascript”>。
type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。
1.2、< head> 或 < body> 中的 JavaScript
举例1：放置于 HTML 页面的 < head> 部分
该函数会在按钮被点击时调用：
<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>
举例2：放置于 HTML 页面的 < body> 部分
该函数会在按钮被点击时调用：
<html>
<body>
<h1>A Web Pageh1>
<p id="demo">一个段落p>
<button type="button" onclick="myFunction()">试一试button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
script>
body>
html>
1.3、外部脚本
脚本可放置与外部文件中。
JavaScript 文件的文件扩展名是 .js。
外部脚本文件：myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
举例：
注：如需使用外部脚本，请在 < script> 标签的 src (source) 属性中设置脚本的名称：
<script src="myScript.js">script>
该脚本的表现与它被置于 < script> 标签中是一样的。
注意：外部脚本不能包含< script> 标签。
1.4、外部引用
可通过完整的 URL 或相对于当前网页的路径引用外部脚本：
举例：
本例使用完整的 URL 来链接至脚本：
<script src="https://www.w3school.com.cn/js/myScript1.js">script>
2、JS输出
JavaScript 显示方案
JavaScript 能够以不同方式“显示”数据：
- 使用 window.alert() 写入警告框
- 使用 document.write() 写入 HTML 输出
- 使用 innerHTML 写入 HTML 元素
- 使用 console.log() 写入浏览器控制台
2.1、使用 innerHTML
如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。
id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容：
<html>
<body>
<h1>我的第一张网页h1>
<p>我的第一个段落p>
<p id="demo">p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
script>
body>
html>
2.2、使用 document.write()
出于测试目的，使用 document.write() 比较方便，该方法会将返回值打印在空白页面上
<html>
<body>
<h1>我的第一张网页h1>
<p>我的第一个段落p>
<script>
document.write(5 + 6);
script>
body>
html>
注意：在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML
所以==document.write() 方法仅用于测试==
测试：
<html>
<body>
<h1>我的第一张网页h1>
<p>我的第一个段落p>
<button onclick="document.write(5 + 6)">试一试button>
body>
html>
2.3、使用 window.alert()
alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。（window.可以省略）
<script>
window.alert(5 + 6);
script>
2.4、使用 console.log()
在浏览器中，您可使用 console.log() 方法将数据显示在浏览器控制台。
请通过 F12 来激活浏览器控制台，并在菜单中选择“控制台”。
<script>
console.log(5 + 6);
script>
三、JS语法
在 HTML 中，JavaScript 语句是由 web 浏览器“执行”的“指令”
1、JavaScript 变量
用var关键字 来声明变量.(js中 所有变量都可以用var来声明)
var a;
var b;
a = 10;
b = true;
var c = null;
var d = "hello js";
var a,b,c;
......
JavaScript 变量是存储数据值的容器
2、JavaScript 标识符
所有 JavaScript 变量必须以唯一的名称的标识。
这些唯一的名称称为标识符。
标识符可以是短名称（比如 x 和 y），或者更具描述性的名称（age、sum、totalVolume）。
构造变量名称（唯一标识符）的通用规则是：
- 名称可包含字母、数字、下划线和美元符号
- 名称必须以字母开头
- 名称也可以 $ 和 _ 开头（但不建议）
- 名称对大小写敏感（y 和 Y 是不同的变量）
- 保留字（比如 JavaScript 的关键词）无法用作变量名称
3、JavaScript 数据类型
JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等：
var i； //未赋值时，默认值为undefined，类型为：undefined
var a = 7; // 数组 number类型
var falg = true; //布尔 boolean类型
var lastName = "Gates"; // 字符串 string类型
var ss = null; //null object类型
var cars = ["Porsche", "Volvo", "BMW"]; // 数组 object类型
var x = {firstName:"Bill", lastName:"Gates"}; // 对象 object类型
var y = function myFunc(){}; //函数 function类型
注：
1.typeof运算符 == typeof（）
作用：确定 JavaScript 变量的类型，返回变量或表达式的类型。返回值为String类型。
typeof 3.14 // 返回 "number"
typeof (7) // 返回 "number"
typeof (7 + 8) // 返回 "number"
typeof "" // 返回 "string"
typeof "Bill"; // 返回 "string"
typeof(null); //返回 “object”
typeof function myFunc(){} // 返回 "function"
......
2.在 JavaScript 中，null 是 “nothing”。它被看做不存在的事物。
可以通过设置值为 null 清空对象
var person = null; // 值是 null，但是类型仍然是对象
可以通过设置值为 undefined 清空对象：
var person = undefined; // 值是 undefined，类型是 undefined
3.Undefined 与 Null 的区别
Undefined 与 null 的值相等，但类型不相等：
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
/*== 与 ===的区别
== 代表相同， ===代表严格相同
当进行双等号比较时候： 先检查两个操作数数据类型，如果相同， 则进行===比较， 如果不同， 则愿意为你进行一次类型转换， 转换成相同类型后再进行比较， 而===比较时， 如果类型不同，直接就是false.
*/
4.空值与 undefined 不是一回事。
空的字符串变量既有值也有类型。
4、JavaScript 关键词
| 关键词 | 描述 |
|---|---|
| break | 终止 switch 或循环。 |
| continue | 跳出循环并在顶端开始。 |
| debugger | 停止执行 JavaScript，并调用调试函数（如果可用）。 |
| do … while | 执行语句块，并在条件为真时重复代码块。 |
| for | 标记需被执行的语句块，只要条件为真。 |
| function | 声明函数。 |
| if … else | 标记需被执行的语句块，根据某个条件。 |
| return | 退出函数。 |
| switch | 标记需被执行的语句块，根据不同的情况。 |
| try … catch | 对语句块实现错误处理。 |
| var | 声明变量。 |
四、JS函数
1、JavaScript 函数语法
JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。
语法：
var 变量名 = function (参数列表) {
函数体;//要执行的代码
};
举例：
function myFunction(p1, p2) {
return p1 * p2; // 该函数返回 p1 和 p2 的乘积
}
注意：在 JavaScript 函数中声明的变量，会成为函数的局部变量。
局部变量只能在函数内访问。
2、函数调用
方法：函数名()；
函数中的代码将在其他代码调用该函数时执行：
- 当事件发生时（当用户点击按钮时）
- 当 JavaScript 代码调用时
- 自动的（自调用）
3、函数返回
当 JavaScript 到达 return 语句，函数将停止执行。
如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。
函数通常会计算出返回值。这个返回值会返回给调用者：
var x = myFunction(7, 8); // 调用函数，返回值被赋值给 x
function myFunction(a, b) {
return a * b; // 函数返回 a 和 b 的乘积
}
五、JS对象
JavaScript 对象是被命名值的容器。
值以名称:值对的方式来书写（名称和值由冒号分隔）。
（JavaScript 对象中的）名称:值对被称为属性。
1、对象定义
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
等价于
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
};
这里的person被称为一个JavaScript对象
2、对象方法
对象也可以有方法。
方法是在对象上执行的动作。
方法以函数定义被存储在属性中。
方法是作为属性来存储的函数。
var person = {
firstName: "Bill",
lastName : "Gates",
id : 678,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
3、访问对象属性、方法
访问对象属性两种形式：
例：
//方式一：
document.write(person.lastName);
//方式二：
document.write(person["lastName"]);
//以下两种形式错误
document.write(person["lastName"+"firstName"]);//结果：undefined
document.write(person["lastName"+"id"]);//结果：undefined
注：这两种方式使用相同。
访问对象方法：
document.write(person.fullName());//Bill Gates
//下面形式返回函数定义
document.write(person.fullName);//function() { return this.firstName + " " + this.lastName; }
4、this 关键词
在函数定义中，this 引用该函数的“拥有者”。
举例：
this.firstName ：意思是 this 对象（这里为person对象）的 firstName 属性。
六、JS字符串、数字
1、JavaScript 字符串
JavaScript 字符串用于存储和操作文本。
//以下两种定义无区别
var carname = "Porsche 911";
var carname = 'Porsche 911';
//
var answer = "He is called 'Bill'";
var answer = 'He is called "Bill"';
1.1、\ 转义字符
由于字符串必须由引号包围，当需要输出的字符串也包含引号时，JavaScript 会误解这段字符串
比如：
var y = "中国是瓷器的故乡，因此 china 与"China（中国）"同名。"
上述：JavaScript会报异常：Uncaught SyntaxError: Unexpected identifier
需使用 \转义字符,反斜杠转义字符把特殊字符转换为字符串字符.
var x = "中国是瓷器的故乡，因此 china 与\"China（中国）\"同名。"
| 代码 | 结果 | 描述 |
|---|---|---|
| ’ | ’ | 单引号 |
| " | " | 双引号 |
| \ | \ | 反斜杠 |
| \b | 退格键 |
|---|---|
| \f | 换页 |
| \n | 新行 |
| \r | 回车 |
| \t | 水平制表符 |
| \v | 垂直制表 |
1.2、字符串对象
字符串可通过关键词 new 定义为对象==(十分不建议使用new方式)==
var x = "Bill";
var y = new String("Bill");
// typeof x 将返回 string
// typeof y 将返回 object
// (x == y) 为 true，因为 x 和 y 的值相等
// (x === y) 为 false，因为 x 和 y 的类型不同（字符串与对象）
new 关键字使代码复杂化,请不要把字符串创建为对象.
弊端：
1.使用 == 相等运算符时，相等字符串是相等的
当使用 === 运算符时，相等字符串是不相等的，因为 = == 运算符需要类型和值同时相等
2.对象无法比较
var x = new String("Bill");
var y = new String("Bill");
// (x == y) 为 false，因为 x 和 y 是不同的对象
// (x === y) 为 false，因为 x 和 y 是不同的对象
1.3、字符串方法
在 ECMAScript中，变量存在两种类型的值，原始值和引用值
ECMAScript 有 5 种原始类型（primitive type），即 Undefined、Null、Boolean、Number 和 String。
引用类型通常叫做类（class），也就是说，遇到引用值，所处理的就是对象。
原始值：存储在栈（stack）中的简单数据段，是原始类型的值。
引用值：存储在堆（heap）中的对象，Object 对象。
原始值，比如“Bill Gates”，无法拥有属性和方法（因为它们不是对象）。但是通过 JavaScript，方法和属性也可用于原始值，因为 在执行方法和属性时 JavaScript 将原始值视为对象
1.31、字符串长度
length 属性返回字符串的长度：
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var str = "中国";
var sp = " a ";
document.write(txt.length);//26
document.write(str.length);//2
document.write(sp.length);//3 空格也算一个字符
1.32、查找字符串中的字符串
indexOf() 方法返回字符串中指定文本首次出现的索引（位置）：（索引从0开始）
lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：
search() 方法搜索特定值的字符串，并返回匹配的位置：结果与indexof（）相同。
区别在于：search() 方法无法设置第二个开始位置参数，可设置更强大的搜索值（正则表达式）。
indexof（）可以设置第二个开始位置参数，不可设置正则表达式。
var str = "abcabcaabbcc";
var pos = str.indexOf("aa");
var pos1 = str.lastIndexOf("aa");
document.write(pos);//3
document.write(pos1);//8
如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。
两种方法都接受作为检索起始位置的第二个参数。
var str = "abcabcaabbcc";
var pos = str.indexOf("aa",2);
var pos1 = str.lastIndexOf("aa",5);
document.write(pos);//6
document.write(pos1);//-1
注意：indexOf()向后进行检索（从头到尾）本例从索引为2的c开始向后检索，经过abc 查到aa
lastIndexOf() 向前进行检索（从尾到头），本例从索引为5的c开始向前检索，经过bacba，未找到aa，返回-1
1.33、提取部分字符串
- slice(start, end)：提取字符串的某个部分并在新字符串中返回被提取的部分。可接受负索引。
- substring(start, end)：与slice(start, end)相同，但不可接负索引
- substr(start, length)：与substring(start, end)类似，只不过第二个参数为长度。
var str = "Apple, Banana, Mango";
var res = str.slice(7, 13);
var res1 = str.slice(7);
var res2 = str.slice(-13, -7);
var res3 = str.slice(-13);
var res4 = str.substring(7, 13);
var res5 = str.substring(7);
var res6 = str.substr(7, 6);
var res7 = str.substr(7);
console.log(res+"\n");//Banana
console.log(res1+"\n");//Banana, Mango
console.log(res2+"\n");//Banana
console.log(res3+"\n");//Banana, Mango
console.log(res4+"\n");//Banana
console.log(res5+"\n");//Banana, Mango
console.log(res6+"\n");//Banana
console.log(res7+"\n");//Banana, Mango
1.34、替换字符串内容
replace() 方法用另一个值替换在字符串中指定的值：
replace() 方法不会改变调用它的字符串。它返回的是新字符串。
默认地，replace() 只替换首个匹配：
var str = "Apple, Banana, Mango";
var newStr = str.replace("Banana","Orange");
document.write(newStr);//Apple, Orange, Mango
var str1 = "Apple, Banana, Mango, Banana";
var newStr1 = str1.replace("Banana","Orange");
document.write(newStr1);//Apple, Orange, Mango, Banana
1.35、转换为大写和小写
通过 toUpperCase() 把字符串转换为大写：
通过 toLowerCase() 把字符串转换为小写：
var str = "Hello World";
document.write(str.toUpperCase());//HELLO WORLD
document.write(str.toLowerCase());//hello world
1.36、concat() 方法
concat() 连接两个或多个字符串：
var text1 = "Hello";
var text2 = "World";
text3 = text1.concat(" ",text2);
concat() 方法可用于代替加运算符。下面两行是等效的：
var text = "Hello" + " " + "World!";
var text = "Hello".concat(" ","World!");
注意：所有字符串方法都会返回新字符串。它们不会修改原始字符串。
正式地说：字符串是不可变的：字符串不能更改，只能替换。
1.37、String.trim()
trim() 方法删除字符串两端的空白符：
var str = " Hello World! ";
alert(str.trim());
1.38、提取字符串字符
charAt() 方法返回字符串中指定下标（位置）的字符串
charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码
var str = "HELLO WORLD";
str.charAt(0); // 返回 H
var str1 = "HELLO WORLD";
str1.charCodeAt(0); // 返回 72
1.39、属性访问
var str = "HELLO WORLD";
str[0]; // 返回 H
注意：
- 它让字符串看起来像是数组（其实并不是）
- 如果找不到字符，[ ] 返回 undefined，而 charAt() 返回空字符串。
- 它是只读的。str[0] = “A” 不会产生错误（但也不会工作！）
var str = "HELLO WORLD";
str[0] = "A"; // 不产生错误，但不会工作
str[0]; // 返回 H
1.310、把字符串转换为数组
split() 方法将字符串转换为数组：
txt.split(","); // 用逗号分隔
txt.split(" "); // 用空格分隔
txt.split("|"); // 用竖线分隔
var str="How are you doing today?"
document.write(str.split(" ") + "
")//How,are,you,doing,today?
document.write(str.split("") + "
")//H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
document.write(str.split(" ",3))//How,are,you
如果省略分隔符，被返回的数组将包含 index [0] 中的整个字符串。
如果分隔符是 “”，被返回的数组将是间隔单个字符的数组.
2、JavaScript 数字
JavaScript 只有一种数值类型
2.1、JavaScript 数值
JavaScript 数值始终是 64 位的浮点数
与许多其他编程语言不同，JavaScript 不会定义不同类型的数，比如整数、短的、长的、浮点的等等。
JavaScript 数值始终以双精度浮点数来存储。
var x = 3.14; // 带小数点的数值
var y = 3; // 不带小数点的数值
var x = 123e5; // 12300000
var y = 123e-5; // 0.00123
2.2、数字和字符串相加
var x = 10;
var y = "20";
var z = x + y; // z 将是 1020（一个字符串）
var x = 10;
var y = 20;
var z = "30";
var result = x + y + z;//结果为3030（字符串）
2.3、数字字符串
JavaScript 字符串可以拥有数字内容：
var x = 100; // x 是数字
var y = "100"; // y 是字符串
document.write(x == y);//true
document.write(x === y);//false
在所有数字运算中，JavaScript 会尝试将字符串转换为数字：（加法运算不满足）
var x = "100";
var y = "10";
var z = x / y; // z 将是 10（数值型）
document.write(typeof(z))//number
var x = "100";
var y = "10";
var z = x + y; // z 不会是 110（而是 10010）
2.4、NaN - 非数值
NaN 属于 JavaScript 保留词，指示某个数不是合法数
使用全局 JavaScript 函数 isNaN() 来确定某个值是否是数：
var x = 100 / "Apple"; // x 将是 NaN（Not a Number）
isNaN(x); // 返回 true，因为 x 不是数
typeof NaN; // 返回 "number"
2.5、Infinity
Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值。
var x = 2 / 0; // x 将是 Infinity
var y = -2 / 0; // y 将是 -Infinity
typeof Infinity; // 返回 "number"
2.6、JavaScript 数值方法
2.61、toString() 方法
toString() 以字符串返回数值。
所有数字方法可用于任意类型的数字（字面量、变量或表达式）：
var x = 123;
x.toString(); // 从变量 x 返回 123
(123).toString(); // 从文本 123 返回 123
(100 + 23).toString(); // 从表达式 100 + 23 返回 123
2.62、toExponential() 、toFixed() 、toPrecision()
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() 返回字符串值，它包含了指定位数小数的数字：
var x = 9.656;
x.toFixed(0); // 返回 10
x.toFixed(2); // 返回 9.66
x.toFixed(4); // 返回 9.6560
x.toFixed(6); // 返回 9.656000
toPrecision() 返回字符串值，它包含了指定长度的数字：
var x = 9.656;
x.toPrecision(); // 返回 9.656
x.toPrecision(2); // 返回 9.7
x.toPrecision(4); // 返回 9.656
x.toPrecision(6); // 返回 9.65600
七、JavaScript 正则表达式
正则表达式是构成*搜索模式（search pattern）*的字符序列。
当您搜索文本中的数据时，您可使用搜索模式来描述您搜索的内容。
正则表达式可以是单字符，或者更复杂的模式。
正则表达式可用于执行所有类型的文本搜索和文本替换操作。
语法：/pattern/attributes
1、修饰符
| 修饰符 | 描述 |
|---|---|
| i | 执行对大小写不敏感的匹配。 |
| g | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 |
| m | 执行多行匹配。 |
2、方括号
方括号用于查找某个范围内的字符：
| 表达式 | 描述 |
|---|---|
| [abc] | 查找方括号之间的任何字符。 |
| [^abc] | 查找任何不在方括号之间的字符。 |
| [0-9] | 查找任何从 0 至 9 的数字。 |
| [a-z] | 查找任何从小写 a 到小写 z 的字符。 |
| [A-Z] | 查找任何从大写 A 到大写 Z 的字符。 |
| [A-z] | 查找任何从大写 A 到小写 z 的字符。 |
| [adgk] | 查找给定集合内的任何字符。 |
| [^adgk] | 查找给定集合外的任何字符。 |
| (red|blue|green) | 查找任何指定的选项。 |
3、元字符
元字符（Metacharacter）是拥有特殊含义的字符：
| 元字符 | 描述 |
|---|---|
| . | 查找单个字符，除了换行和行结束符。 |
| \w | 查找单词字符。 |
| \W | 查找非单词字符。 |
| \d | 查找数字。 |
| \D | 查找非数字字符。 |
| \s | 查找空白字符。 |
| \S | 查找非空白字符。 |
| \b | 匹配单词边界。 |
| \B | 匹配非单词边界。 |
| \0 | 查找 NUL 字符。 |
| \n | 查找换行符。 |
| \f | 查找换页符。 |
| \r | 查找回车符。 |
| \t | 查找制表符。 |
| \v | 查找垂直制表符。 |
| \xxx | 查找以八进制数 xxx 规定的字符。 |
| \xdd | 查找以十六进制数 dd 规定的字符。 |
| \uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
4、量词
| 量词 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一个 n 的字符串。 |
| n* | 匹配任何包含零个或多个 n 的字符串。 |
| n? | 匹配任何包含零个或一个 n 的字符串。 |
| n{X} | 匹配包含 X 个 n 的序列的字符串。 |
| n{X,Y} | 匹配包含 X 至 Y 个 n 的序列的字符串。 |
| n{X,} | 匹配包含至少 X 个 n 的序列的字符串。 |
| n$ | 匹配任何结尾为 n 的字符串。 |
| ^n | 匹配任何开头为 n 的字符串。 |
| ?=n | 匹配任何其后紧接指定字符串 n 的字符串。 |
| ?!n | 匹配任何其后没有紧接指定字符串 n 的字符串。 |
5、常用正则表达式
| 用户名 | /^ [a-z0-9_-]{3,16}$/ |
|---|---|
| 密码 | /^ [a-z0-9_-]{6,18}$/ |
| 十六进制值 | /^#?([a-f0-9]{6}|[a-f0-9]{3})$/ |
| 电子邮箱 | /^([a-z0-9_.-]+)@([\da-z.-]+).([a-z.]{2,6})KaTeX parse error: Undefined control sequence: \d at position 9: / /^[a-z\̲d̲]+(\.[a-z\d]+)*…/ |
| URL | /^(https?:\ //)?([\da-z.-]+).([a-z.]{2,6})([/\w .-])/?$/ |
| IP 地址 | /((2[0-4]\d|25[0-5]|[01]?\d\d?).){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/ /^(?: (?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/ |
| HTML 标签 | / <([a-z]+)([ <]+)(?:>(.)|\s+/>)$/ |
| 删除代码\注释 | (? |
| Unicode编码中的汉字范围 | /^ [\u2E80-\u9FFF]+$/ |
注：若需要更详细的学习该技术，推荐去w3school网进行进一步学习。
网址：https://www.w3school.com.cn/