JavaScript-2-菜鸟教程-CSDN博客

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

字符串

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

可以使用内置属性 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回车
\ttab(制表符)
\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=6y=6
y = 5, x = y++ → x=5y=6
-- 自减y = 5, x = --y → x=4y=4
y = 5, x = y-- → x=5y=4

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

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

比较 和 逻辑运算符

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

比较运算符

x = 5

运算符描述比较返回值
==等于x==8false
===绝对等于值和类型均相等x===“5”
x===5		false
true
!=不等于x!=8true
!==不绝对等于值和类型有一个不相等或两个都不相等x!==“5”
x!==5		true
false
>大于x>8false
<小于x<8true
>=大于或等于x>=8false
<=小于或等于x<=8true

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>

BMW
Volvo
Saab

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
标签: JavaScriptJava
返回列表

上一篇：我会在以下情况用到GPT-CSDN博客

下一篇：软考高级系统架构设计师系列之：案例分析典型试题三-CSDN博客

“JavaScript-2-菜鸟教程-CSDN博客” 的相关文章

洛谷oj题单【入门1】顺序结构-入门难度（Java）1年前 (2023-02-02)
黑马程序员最新版JavaWeb综合案例(前后端完整版)_黑马程序员 前后项目1年前 (2023-02-02)
【Java编程进阶】Java异常详解1年前 (2023-02-02)
花30天整理了11个超棒的Java开源项目，雀氏牛逼1年前 (2023-02-02)
Java Swing五子棋项目1年前 (2023-02-02)
JavaScript 如何正确的分析报错信息1年前 (2023-02-02)
[JavaEE]线程的状态与安全1年前 (2023-02-02)
java+springboot笔记20230021年前 (2023-02-02)
JAVA练习191年前 (2023-02-02)
【Java基础知识 4】Java数据类型之间的转换、运算符1年前 (2023-02-02)

阿里云国际版