当前位置：首页 > article >正文

JavaScript-2-菜鸟教程

article 2025/2/26 8:05:16

字符串

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

可以使用内置属性 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('<br>')              // 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 = `<h2>${header}</h2><ul>`;
        for (const x of tags) {
            html += `<li>${x}</li>`;
        }

        html += `</ul>`;
        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("<b>早上好</b>");
        }
        else if (time >= 10 && time < 20) {
            document.write("<b>今天好</b>");
        }
        else {
            document.write("<b>晚上好!</b>");
        }
    </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] + "<br>");
        }
    </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 + "<br>";
            }
            document.getElementById("demo").innerHTML = x;
        }
    </script>

在这里插入图片描述
可以同时声明多个变量，用逗号隔开

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

在循环开始前已经设置了变量值时，可以省略语句1

    <script>
        cars = ["BMW", "Volvo", "Saab", "Ford"];
        var i = 2, len = cars.length;
        for (; i < len; i++) {
            document.write(cars[i] + "<br>");
        }
    </script>

循环内部有相应代码时，语句3也可以省略

    <script>
        cars = ["BMW", "Volvo", "Saab", "Ford"];
        var i = 0, len = cars.length;
        for (; i < len;) {
            document.write(cars[i] + "<br>");
            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 + "<br>";
                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] + "<br>");
            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 + "<br>";
            }
            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 + "<br>";
                i++;
            }
            document.getElementById("demo").innerHTML = x;
        }
    </script>

在这里插入图片描述

标记 JavaScript 语句，在语句之前加上冒号

    <script>
        cars = ["BMW", "Volvo", "Saab", "Ford"];
        list: {
            document.write(cars[0] + "<br>");
            document.write(cars[1] + "<br>");
            document.write(cars[2] + "<br>");
            // 跳出 JavaScript 代码块
            break list;
            document.write(cars[2] + "<br>");
            document.write(cars[3] + "<br>");
            document.write(cars[4] + "<br>");
        }
    </script>