JavaScript-2-菜鸟教程

字符串

可以使用 索引 位置访问字符串中的每个字符

可以使用内置属性 length 来计算字符串的长度

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

    <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>
1
2
3
4
5
6
7
8

    <p id="demo">p>
    <script>
        var x = "John";              // x 是字符串
        var y = new String("John");  // y 是一个对象
        document.getElementById("demo").innerHTML = x === y;
    script>
    <p>=== 为绝对相等，即数据类型与值都必须相等。p>
1
2
3
4
5
6
7

特殊字符

字符串属性

字符串方法

模板字符串

JavaScript 中的模板字符串是一种方便的字符串语法，允许你在字符串中嵌入表达式和变量
模板字符串使用反引号 `` 作为字符串的定界符分隔的字面量
模板字面量是用反引号（`）分隔的字面量，允许多行字符串、带嵌入表达式的字符串插值和一种叫带标签的模板的特殊结构

不使用转义符可以直接显示 引号

    <p id="demo">p>
    <script>
        let text = `He's often called "Runoob"`;
        document.getElementById("demo").innerHTML = text;
    script>
1
2
3
4
5

He’s often called “Runoob”

可支持多行输入，行与行之间插入一个空格

    <script>
        const multiLineText = `
          This is
          a multi-line
          text.
        `;
        document.write(multiLineText);
    script>
1
2
3
4
5
6
7
8

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>
1
2
3
4
5
6
7

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>
1
2
3
4
5
6
7

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>
1
2
3
4
5
6
7
8
9
10
11
12

运算符

不论是y++ ++y y-- --y ，y本身的值都会改变

数字与字符串相加，返回字符串

比较 和 逻辑运算符

比较和逻辑运算符用于测试 true 或者 false

比较运算符

x = 5

if (age<18) x=“Too young”;

逻辑运算符

x = 6 ，y = 3

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>
1
2
3
4
5
6
7
8
9
10
11
12
13

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

注意 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>
1
2
3
4
5
6

    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13

可以同时声明多个变量，用逗号隔开

for (var i=0,len=cars.length; i

    <script>
        cars = ["BMW", "Volvo", "Saab", "Ford"];
        var i = 2, len = cars.length;
        for (; i < len; i++) {
            document.write(cars[i] + "
");
        }
    script>
1
2
3
4
5
6
7

    <script>
        cars = ["BMW", "Volvo", "Saab", "Ford"];
        var i = 0, len = cars.length;
        for (; i < len;) {
            document.write(cars[i] + "
");
            i++;
        }
    script>
1
2
3
4
5
6
7
8

    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    <button onclick="myFunction()">点击这里button>
    <script>
        function myFunction() {
            var x = "", i = 0;
            while (i < 5) {
                x = x + i + " ";
                i++;
            }
            document.write(x);
        }
    script>
1
2
3
4
5
6
7
8
9
10
11

    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

    <script>
        cars = ["BMW", "Volvo", "Saab", "Ford"];
        var i = 0;
        while (cars[i]) {
            document.write(cars[i] + "
");
            i++;
        }
    script>
1
2
3
4
5
6
7
8

    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13