JavaScript-2-菜鸟教程

news2025/1/11 21:55:33

字符串

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

可以使用内置属性 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=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==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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1137580.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

p5.js 变换操作

本文简介 带尬猴&#xff0c;我嗨德育处主任 在 canvas 里&#xff0c;变换是基础功能。很多基于 canvas 封装的库都有这功能&#xff0c;比如 《Fabric.js 变换视窗》。 变换是针对画布进行全局调整的一种能力&#xff0c;它可以对画布进行全局移动、缩放、旋转等操作。 p5…

hibernate源码(2)--- springboot-jpa是如何引入的

starter引入 要想看jpa是如何将hibernate引入容器&#xff0c;首先要看的是 spring-boot-starter-data-jpa 如何引入依赖&#xff1a; 如果注意的话&#xff0c;starter的包内容其实没有什么实质的内容&#xff0c;关键是pom里的依赖 pom中规定了各依赖和依赖的版本&#xf…

python 过滤曲线噪点(滤波)

import numpy as np import matplotlib.pyplot as plt from scipy import signal# 生成示例信号 t np.linspace(0, 1, 1000) x np.sin(2 * np.pi * 5 * t) np.sin(2 * np.pi * 20 * t) np.random.randn(len(t)) * 0.2# 设计低通滤波器 order 3 # 滤波器阶数 cutoff_freq …

Linux--进程等待

1.什么是进程等待 1.通过系统调用wait/waitid,来对子进程进行进行检测和回收的功能。 2.为什么有进程等待 1.对于每个进程来说&#xff0c;如果子进程终止&#xff0c;父进程没有停止&#xff0c;就会形成僵尸进程&#xff0c;导致内存泄露&#xff0c;为了防止僵尸进程的形成…

【组合计数】CF1866 H

Problem - H - Codeforces 题意 思路 不知道这种trick叫什么&#xff0c;昨天VP刚遇到过 设 f[x] 为恰好有一个最大值为 x 的方案数&#xff0c;我们要求这个&#xff0c;那就设 g[x] 为 至少有一个最大值为 x 的方案数&#xff0c;那么答案就是 f[x] g[x] - g[x - 1] 这里…

等高度结构的顺序一致性

3( A, B )---3*30*2---( 1, 0 )( 0, 1 ) 4( A, B )---3*30*2---( 1, 0 )( 0, 1 ) 5( A, B )---3*30*2---( 1, 0 )( 0, 1 ) 做3个网络,让网络的输入都只有3个节点&#xff0c; 一个网络的训练集有3张图片&#xff0c;一个网络的训练集有4张图片&#xff0c;一个网络的训练集有…

Zeth:首个Type 0 zkEVM

1. 引言 一年前&#xff0c;V神博客The different types of ZK-EVMs中指出&#xff1a; 以太坊初始设计未围绕ZK友好性&#xff0c;因此&#xff0c;以太坊协议的很多部分都需要大量计算来做ZK-prove。Type 1 zkEVM致力于精准复制以太坊&#xff0c;因此它没有办法减轻这些低…

Dockerfile文件自动化生成R4L镜像

Dockerfile文件自动化生成R4L镜像的步骤 1、安装Docker&#xff1a;2、使用Dockerfile一键生成镜像&#xff1a;3、查看生成的Docker镜像&#xff1a;4、删除Docker镜像&#xff1a;5、生成Docker容器&#xff1a;6、查看容器7、删除容器 1、安装Docker&#xff1a; curl -fsS…

小工具推荐:FastGithub的下载及使用

前言&#xff1a;FastGithub是基于dotnet开发的一款开源Github加速器&#xff0c;通过自动获取与GitHub相关的IP地址并更新本地hosts文件来提高资源访问速度&#xff0c;使GitHub的访问畅通无阻。原理&#xff08;复制过来的&#xff09;&#xff1a; ①修改本机的DNS服务指向…

Linux权限——“Linux”

各位CSDN的uu们好呀&#xff0c;今天&#xff0c;小雅兰的内容是Linux基本权限&#xff0c;下面&#xff0c;我们进入Linux的世界吧&#xff01;&#xff01;&#xff01; shell命令以及运行原理 Linux权限的概念 chmod ax /home/abc.txt file指令 目录的权限 关于权限的总…

vue重修之Vuex【下部】

文章目录 版权声明Vuex的模块化获取Vuex模块内state数据获取Vuex模块内getters数据获取Vuex模块内mutations方法获取模块内的actions方法总结 版权声明 本博客的内容基于我个人学习黑马程序员课程的学习笔记整理而成。我特此声明&#xff0c;所有版权属于黑马程序员或相关权利…

DBeaver连接数据库报错:Public Key Retrieval is not allowed 的解决方案

写在前面&#xff1a; DBeaver是一款免费的数据库管理工具&#xff0c;安装也是傻瓜式一键安装&#xff0c;比较推荐。 DBeaver官网&#xff08;加载有点慢&#xff0c;耐心等待&#xff09;&#xff1a;DBeaver Community | Free Universal Database Tool 报错详情&#xff…

【Java 进阶篇】Java Request 原理详解

在网络应用开发中&#xff0c;HTTP请求是一项常见而关键的任务。当我们使用Java编写网络应用时&#xff0c;了解HTTP请求的工作原理变得至关重要。本文将详细介绍Java中HTTP请求的原理&#xff0c;包括请求的结构、发送请求的方法以及处理请求的过程。 HTTP请求的基本结构 HT…

使用字节流读取文件中的数据的几种方式

public class FileReader02_ {public static void main(String[] args) {}Testpublic void m1() {String filePath "e:\\hello.txt";FileReader fileReader null;int date0;try {fileReader new FileReader(filePath);//循环读取 使用readwhile ((datefileReader.…

上市公司员工及工资数据(2000-2022年)

参照《经济研究》中毛其淋等&#xff08;2023&#xff09;的做法&#xff0c;团队对上市公司员工、工资数据测算。用上市公司&#xff49;在&#xff54;年的员工人数的对数衡量企业的就业水平&#xff0c;采用企业应付职工薪酬与员工人数的比值衡量企业工资水平 一、数据介绍 …

PROFINET通信介绍

S7-1200和汇川变频器的PROFINET通信应用&#xff0c;请参考下面文章链接&#xff1a; PN通信组态(汇川变频器和S7-1200PN通信)-CSDN博客文章浏览阅读1.2k次。ABB变频器的PN通信相关设置&#xff0c;请参看下面的文章链接博途PLC和ABB变频器PN通讯详解_abb 变频器 pn通信_RXXW_…

Windows客户端下pycharm配置跳板机连接内网服务器

问题&#xff1a;实验室服务器仅限内网访问&#xff0c;无法在宿舍&#xff08;外网&#xff09;访问实验室的所有内部服务器&#xff0c;但同时实验室又提供了一个外网可以访问的跳板机&#xff0c;虽然可以先ssh到跳板机再从跳板机ssh到内网服务器&#xff0c;但这种方式不方…

朵拉钓鱼,快来一起钓鱼

欢迎来到程序小院 朵拉钓鱼 玩法&#xff1a;鼠标对准鱼的位置点击左键进行钓鱼&#xff0c;钓到不同鱼有不同分数奖励&#xff0c;钓到鞋子-2&#xff0c;钓到鲨鱼游戏结束&#xff0c;统计分数&#xff0c;快去钓鱼吧^^。开始游戏https://www.ormcc.com/play/gameStart/195 …

protobuf使用详解

一、protobuf简介 1、什么是 protobuf Protocal Buffers&#xff08;简称protobuf&#xff09;是谷歌的一项技术&#xff0c;用于结构化的数据序列化、反序列化。 官方解释&#xff1a;Protocol Buffers 是一种语言无关、平台无关、可扩展的序列化结构数据的方法&#xff0c;它…

Power BI 傻瓜入门 11. 可视化数据

本章内容包括&#xff1a; 掌握Power BI中可用的各种可视化选项决定何时使用特定的可视化技术了解Power BI版本之间的可视化配置差异 “一张图片能说出千言万语”是许多人使用Power BI的原因之一。您已经导入了数据&#xff0c;可能有数百万条记录&#xff0c;现在您想了解数…