JavaScript-2-菜鸟教程
字符串
可以使用 索引 位置访问字符串中的每个字符
可以使用内置属性 length 来计算字符串的长度
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;
<script>
var x = "John"; // x是一个字符串
// 使用 new 关键字将字符串定义为一个对象
var y = new String("John"); // y是一个对象
document.write(x + ' | ' + y) // John | John
document.write('
') // string | object
document.write(typeof x + ' | ' + typeof y)
script>
<p id="demo">p>
<script>
var x = "John"; // x 是字符串
var y = new String("John"); // y 是一个对象
document.getElementById("demo").innerHTML = x === y;
script>
<p>=== 为绝对相等，即数据类型与值都必须相等。p>
特殊字符
| 代码 | 输出 |
|---|---|
| \’ | 单引号 |
| \" | 双引号 |
| \\ | 反斜杠 |
| \n | 换行 |
| \r | 回车 |
| \t | tab(制表符) |
| \b | 退格符 |
| \f | 换页符 |
字符串属性
| 属性 | 描述 |
|---|---|
| constructor | 返回创建字符串属性的函数 |
| length | 返回字符串的长度 |
| prototype | 允许您向对象添加属性和方法 |
字符串方法
| 方法 | 描述 |
|---|---|
| charAt() | 返回指定索引位置的字符 |
| charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
| concat() | 连接两个或多个字符串，返回连接后的字符串 |
| fromCharCode() | 将 Unicode 转换为字符串 |
| indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
| lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
| localeCompare() | 用本地特定的顺序来比较两个字符串 |
| match() | 找到一个或多个正则表达式的匹配 |
| replace() | 替换与正则表达式匹配的子串 |
| search() | 检索与正则表达式相匹配的值 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分 |
| split() | 把字符串分割为子字符串数组 |
| substr() | 从起始索引号提取字符串中指定数目的字符 |
| substring() | 提取字符串中两个指定的索引号之间的字符 |
| toLocaleLowerCase() | 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
| toLocaleUpperCase() | 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
| toLowerCase() | 把字符串转换为小写 |
| toString() | 返回字符串对象值 |
| toUpperCase() | 把字符串转换为大写 |
| trim() | 移除字符串首尾空白 |
| valueOf() | 返回某个字符串对象的原始值 |
模板字符串
JavaScript 中的模板字符串是一种方便的字符串语法，允许你在字符串中嵌入表达式和变量
模板字符串使用反引号 `` 作为字符串的定界符分隔的字面量
模板字面量是用反引号（`）分隔的字面量，允许多行字符串、带嵌入表达式的字符串插值和一种叫带标签的模板的特殊结构
不使用转义符可以直接显示 引号
<p id="demo">p>
<script>
let text = `He's often called "Runoob"`;
document.getElementById("demo").innerHTML = text;
script>
He’s often called “Runoob”
可支持多行输入，行与行之间插入一个空格
<script>
const multiLineText = `
This is
a multi-line
text.
`;
document.write(multiLineText);
script>
This is a multi-line text.
占位符
<p id="demo">p>
<script>
const name = 'Runoob';
const age = 30;
const message = `My name is ${name} and I'm ${age} years old.`;
document.getElementById("demo").innerHTML = message;
script>
My name is Runoob and I’m 30 years old.
<script>
let price = 10;
let VAT = 0.25;
// toFixed 将一个浮点数转换为指定小数位数的字符串
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;
document.write(total);
script>
Total: 12.50
<script>
let header = "";
let tags = ["RUNOOB", "GOOGLE", "TAOBAO"];
let html = `${header}
`;
for (const x of tags) {
html += `${x}`;
}
html += ``;
document.write(html)
script>
运算符
| 运算符 | 举例 |
|---|---|
| % 取余 | 5 % 2 = 1 |
| ++ 自增 | y = 5, x = ++y → x=6，y=6 y = 5, x = y++ → x=5，y=6 |
-- 自减 |
y = 5, x = --y → x=4，y=4 y = 5, x = y-- → x=5，y=4 |
不论是y++ ++y y-- --y ，y本身的值都会改变
数字与字符串相加，返回字符串
比较 和 逻辑运算符
比较和逻辑运算符用于测试 true 或者 false
比较运算符
x = 5
| 运算符 | 描述 | 比较 | 返回值 |
|---|---|---|---|
| == | 等于 | x==8 | false |
| === | 绝对等于（值和类型均相等） | x===“5” x===5 |
false true |
| != | 不等于 | x!=8 | true |
| !== | 不绝对等于（值和类型有一个不相等，或两个都不相等） | x!==“5” x!==5 |
true false |
| > | 大于 | x>8 | false |
| < | 小于 | x<8 | true |
| >= | 大于或等于 | x>=8 | false |
| <= | 小于或等于 | x<=8 | true |
if (age<18) x=“Too young”;
逻辑运算符
x = 6 ，y = 3
| 运算符 | 描述 | 例子 |
|---|---|---|
| && | and | (x < 10 && y > 1) 为 true |
| || | or | (x == 5 || y==5) 为 false |
| ! | not | !(x==y) 为 true |
variablename=(condition)?value1:value2
<p>点击按钮检测年龄。p>
年龄:<input id="age" value="18" />
<p>是否达到投票年龄?p>
<button onclick="myFunction()">点击按钮button>
<p id="demo">p>
<script>
function myFunction() {
var age, voteable;
age = document.getElementById("age").value;
voteable = (age < 18) ? "年龄太小" : "年龄已达到";
document.getElementById("demo").innerHTML = voteable;
}
script>
if 条件语句
<p>点击这个按钮，获得基于时间的问候。p>
<button onclick="myFunction()">点击这里button>
<p id="demo">p>
<script>
function myFunction() {
var x = "";
var time = new Date().getHours();
if (time < 20) {
x = "Good day";
}
else {
x = "Good evening";
}
document.getElementById("demo").innerHTML = x;
}
script>
<script type="text/javascript">
var d = new Date();
var time = d.getHours();
if (time < 10) {
document.write("早上好");
}
else if (time >= 10 && time < 20) {
document.write("今天好");
}
else {
document.write("晚上好!");
}
script>
switch 条件语句
选择要执行的多个代码块之一
break 阻止代码自动地向下一个 case 运行
default 关键词 规定匹配不存在时做的事情
<p>点击下面的按钮，会显示出基于今日日期的消息：p>
<button onclick="myFunction()">点击这里button>
<p id="demo">p>
<script>
function myFunction() {
var x;
var d = new Date().getDay();
switch (d) {
case 6: x = "今天是星期六";
break;
case 0: x = "今天是星期日";
break;
default:
x = "期待周末";
}
document.getElementById("demo").innerHTML = x;
}
script>
注意 Sunday=0, Monday=1, Tuesday=2, 等等
for 循环
for 循环的用法
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
<script>
cars = ["BMW", "Volvo", "Saab", "Ford"];
for (var i = 0; i < cars.length; i++) {
document.write(cars[i] + "
");
}
script>
<p>点击按钮循环代码5次。p>
<button onclick="myFunction()">点击这里button>
<p id="demo">p>
<script>
function myFunction() {
var x = "";
for (var i = 0; i < 5; i++) {
// 累加
x = x + "该数字为 " + i + "
";
}
document.getElementById("demo").innerHTML = x;
}
script>
可以同时声明多个变量，用逗号隔开
for (var i=0,len=cars.length; i在循环开始前已经设置了变量值时，可以省略语句1
<script>
cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 2, len = cars.length;
for (; i < len; i++) {
document.write(cars[i] + "
");
}
script>
循环内部有相应代码时，语句3也可以省略
<script>
cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0, len = cars.length;
for (; i < len;) {
document.write(cars[i] + "
");
i++;
}
script>
for in
<p>点击下面的按钮，循环遍历对象 "person" 的属性。p>
<button onclick="myFunction()">点击这里button>
<p id="demo">p>
<script>
function myFunction() {
var x;
var txt = "";
var person = { fname: "Bill", lname: "Gates", age: 56 };
// x is key 键
for (x in person) {
txt = txt + person[x] + ' ';
}
document.getElementById("demo").innerHTML = txt;
}
script>
while 循环
<button onclick="myFunction()">点击这里button>
<script>
function myFunction() {
var x = "", i = 0;
while (i < 5) {
x = x + i + " ";
i++;
}
document.write(x);
}
script>
0 1 2 3 4
do/while 循环
该循环至少会执行一次，即使条件为 false 它也会执行一次，因为代码块会在条件被测试前执行
<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。p>
<button onclick="myFunction()">点击这里button>
<p id="demo">p>
<script>
function myFunction() {
var x = "", i = 0;
do {
x = x + "该数字为 " + i + "
";
i++;
}
while (i < 5)
document.getElementById("demo").innerHTML = x;
}
script>
<script>
cars = ["BMW", "Volvo", "Saab", "Ford"];
var i = 0;
while (cars[i]) {
document.write(cars[i] + "
");
i++;
}
script>
break 和 continue
break 语句用于跳出循环
continue 用于跳过循环中的一个迭代
<p>点击按钮，测试带有 break 语句的循环。p>
<button onclick="myFunction()">点击这里button>
<p id="demo">p>
<script>
function myFunction() {
var x = "", i = 0;
for (i = 0; i < 10; i++) {
// if (i == 3) {
// break;
// }
// 由于这个 if 语句只有一行代码，所以可以省略花括号
if (i==3) break;
x = x + "该数字为 " + i + "
";
}
document.getElementById("demo").innerHTML = x;
}
script>
<p>点击下面的按钮来执行循环，该循环会跳过 i=3 的数字。p>
<button onclick="myFunction()">点击这里button>
<script>
function myFunction() {
var x = "", i = 0;
for (i = 0; i < 10; i++) {
// if (i == 3) {
// continue;
// }
if (i == 3) continue;
x = x + i + " ";
}
document.write(x);
}
script>
0 1 2 4 5 6 7 8 9
<p id="demo">点击下面的按钮来执行循环，该循环会跳过 i=3 的数字。p>
<button onclick="myFunction()">点击这里button>
<script>
function myFunction() {
var x = "", i = 0;
while (i < 10) {
if (i == 3) {
i++; //加入i++不会进入死循环
continue;
}
x = x + "该数字为 " + i + "
";
i++;
}
document.getElementById("demo").innerHTML = x;
}
script>
标记 JavaScript 语句，在语句之前加上冒号
<script>
cars = ["BMW", "Volvo", "Saab", "Ford"];
list: {
document.write(cars[0] + "
");
document.write(cars[1] + "
");
document.write(cars[2] + "
");
// 跳出 JavaScript 代码块
break list;
document.write(cars[2] + "
");
document.write(cars[3] + "
");
document.write(cars[4] + "
");
}
script>
BMW
Volvo
Saab