Javaweb学习之JavaScript输出与字符串（二）

前情回顾

Javaweb学习之JavaScript（一）-CSDN博客

学习资源

w3school 在线教程

本期介绍

输出语句

在JavaScript中，有几种方式可以输出信息到控制台（console）、浏览器窗口（window）或其他地方。下面是一些最常用的输出语句：

console.log()

这是最常用的输出语句之一，用于在浏览器的控制台（Console）中输出信息。这对于调试代码非常有用。
```
console.log("Hello, World!");
```
console.error()

类似于console.log()，但console.error()会将输出信息视为错误，并通常以红色显示（这取决于浏览器的控制台样式）。这对于在开发过程中标记错误或需要注意的信息很有用。
```
console.error("This is an error message.");
```
console.warn()

这个语句用于输出警告信息。与console.error()类似，但信息通常被视为警告而非错误，可能以黄色或其他颜色显示（取决于浏览器的控制台样式）。
```
console.warn("This is a warning message.");
```
console.info()

这个语句用于输出信息性消息。尽管它和console.log()在功能上非常相似，但console.info()在某些开发环境中可能会以不同的方式处理或显示信息。
```
console.info("This is an informational message.");
```
document.write()

这个语句会向HTML文档写入内容。虽然它在早期的Web开发中广泛使用，但现在通常不推荐使用，因为它会重写整个页面的内容（如果它在文档加载完成后执行），或者将内容添加到当前页面的末尾（如果它在文档加载过程中执行）。
```
document.write("<p>Hello, World!</p>");
```
innerHTML

这不是一个直接的输出语句，但你可以使用它来修改HTML元素的内容，从而间接地“输出”内容到页面上。这是一种更现代、更灵活的方式来在Web页面上显示信息。
```
document.getElementById("demo").innerHTML = "Hello, World!";
```
```
假设你的HTML中有一个元素如下：
```
```
<div id="demo"></div>
```
alert()

这个语句会在浏览器中弹出一个警告框，显示指定的消息。虽然它在某些情况下很有用（如向用户显示即时通知），但过度使用可能会导致不良的用户体验。
```
alert("Hello, World!");
```

我在看视频学习时发现，有的人在alert的前面会加前缀。为此，我特地在网上查了资料。

关于alert函数前面是否需要前缀的问题，通常来说，在JavaScript中直接使用alert()函数时，并不需要特定的前缀。alert是window对象的一个方法，用于显示带有一段消息和一个确认按钮的警告框。因此，理论上你可以通过window.alert()来调用它，但window前缀是可选的，直接写alert()同样有效。

这里有几个关键点需要注意：

直接调用：在大多数情况下，你可以直接写alert("消息内容");来弹出一个警告框，而不需要前缀window.。

window对象：window是JavaScript中的一个全局对象，它代表了浏览器的一个实例（或窗口）。由于alert是window对象的一个方法，因此理论上应该通过window.alert()来调用它。但在实际开发中，由于window是全局对象，其属性和方法可以在不显式引用window的情况下被访问。

使用场景：alert函数通常用于在浏览器中向用户显示简单的消息或警告。然而，由于它会阻塞页面的其他操作直到用户关闭警告框，因此不建议在需要响应用户交互或保持页面流畅性的场合频繁使用。

替代方案：对于更复杂的用户交互需求，可以考虑使用HTML元素（如<div>标签结合CSS样式）和JavaScript（如通过修改元素的innerHTML或textContent属性）来创建更灵活、更易于控制的弹出框或消息提示。

综上所述，alert函数前面通常不需要前缀，直接调用即可。但在某些特殊情况下（如需要明确指定作用域或避免与局部变量冲突时），使用window.alert()也是完全可以的。

根据你的具体需求（如调试、向用户显示信息或修改页面内容），你可以选择最适合你的输出语句。

字符串

javaScript 中的字符串是一个非常重要的数据类型，常用于存储和操作文本。

1. 字符串的创建

 <h2>JavaScript 字符串是引号中的零个或多个字符</h2>
    <p id="" demo></p>
    <script>
        var x = "hhh"; // 用引号包围的字符串
        document.getElementById("demo").innerHTML = x;
    </script>

在 JavaScript 中，字符串可以通过两种主要方式创建：

使用单引号（'）或双引号（"）括起来的文本。

<h2>JavaScript 字符串</h2>
    <p>字符串在引号中书写。您能够使用单引号或双引号：</p>
    <p id="demo1"></p>
    <script>
        var c1 = "ssss";
        var c2 = 'ssss';
        document.getElementById("demo1").innerHTML = c1 + "   " + c2;
    </script>

使用 String 构造函数。

String 构造函数创建的是字符串对象，而不是字符串字面量（str1 和 str2 是字符串字面量），但在大多数情况下，它们的行为是相同的。

2. 字符串的不可变性

JavaScript 中的字符串是不可变的，这意味着一旦字符串被创建，就不能更改它的内容。任何看起来像是修改字符串的操作（如拼接或替换），实际上都是创建了一个新的字符串。

3. 字符串长度

可以通过 length 属性获取字符串的长度（即字符数）。

    <h1>JavaScript 字符串属性</h1>
    <p>length 属性返回字符串的长度：</p>
    <p id="demo2"></p>
    <script>
        var c3 = "dfghjklkjhgfdfghjkl";
        document.getElementById("demo2").innerHTML = c3.length;
    </script>

4.特殊字符

使用 \ 转义字符。

反斜杠转义字符把特殊字符转换为字符串字符：

\'	'	单引号
\"	"	双引号
\\	\	反斜杠

<p>转义序列 \" 在字符串中插入双引号。</p>
    <p id="demo3"></p>
    <script>
        var c4 = "中国是瓷器的故乡,因此China合\"China\"同名。"
        document.getElementById("demo3").innerHTML = c4;
    </script>


    <p>转义序列 \' 在字符串中插入单引号。</p>
    <p id="demo4"></p>
    <script>
        var c5 = "It\' good to see you!";
        document.getElementById("demo4").innerHTML = c5;

    </script>


    <p>转义序列 \\ 在字符串中插入反斜杠。</p>
    <p id="demo5"></p>
    <script>

        var c6 = "字符\\被称为反斜杠。"
        document.getElementById("demo5").innerHTML = c6;
    </script>

5.长代码行换行

\ 方法并不是 ECMAScript (JavaScript) 标准。

某些浏览器也不允许 \ 字符之后的空格。

对长字符串换行的最安全做法（但是有点慢）是使用字符串加法

<p>可以用反斜杠在文本字符串中进行换行。</p>
    <p id="demo7"></p>
    <script>
        document.getElementById("demo7").innerHTML = "hello \
        kk";
        /* 直接这样换会报错，所以需要一个反斜杠
        document.getElementById("demo7").innerHTML ="hello 
        kk"; */
    </script>



    <p id="demo8">不能用反斜杠对代码行进行折行。</p>
    <script>
        /*  document.getElementById("demo").innerHTML = \
         "Hello Kitty"; */
    </script>



    <p>在字符串中进行换行的最安全方法是使用字符串相加。</p>
    <p id="demo9"></p>
    <script>
        document.getElementById("demo9").innerHTML = "Hello " +
            "Kitty";
    </script>

6.字符串可以是对象

<p id="demo10"></p>
    <script>
        var c7 = "bill";// c7 是字符串
        var c8 = new String("bill");// c8 是对象

        document.getElementById("demo10").innerHTML = typeof c7 + "<br>" + typeof c8;
    </script>

    <!--   
    请不要把字符串创建为对象。它会拖慢执行速度。
    new 关键字使代码复杂化。也可能产生一些意想不到的结果：
    当使用 == 相等运算符时，相等字符串是相等的
    -->


    <h1>绝不要把字符串创建为对象</h1>

    <p>字符串与对象无法安全地比较。</p>

    <p id="demo11"></p>

    <script>
        var c10 = "Bill";              // c10 是字符串
        var c12 = new String("Bill");  // c12 是对象
        document.getElementById("demo12").innerHTML = (c11 == c12);
        document.getElementById("demo12").innerHTML = (c11 === c12);
    </script>



    <p>JavaScript 对象无法比较。</p>

    <p id="demo13"></p>

    <script>
        var c13 = new String("Bill");  // c13 是对象
        var c14 = new String("Bill");  // c14 也是对象
        document.getElementById("demo13").innerHTML = (c13 == c14);
        document.getElementById("demo13").innerHTML = (c13 === c14);
        // (c13 == c14) 为 false，因为 c13 和 c14 是不同的对象
        // (c13 === c14) 为 false，因为 c13 和 c14 是不同的对象
    </script>

5. 字符串方法

JavaScript 提供了大量的字符串方法来执行各种操作，如搜索、替换、拼接等。以下是一些常用方法的示例：

.concat()：连接两个或多个字符串。
.indexOf()：返回指定值的首次出现的索引，如果未找到则返回 -1。
.slice()：提取字符串的一部分，并返回一个新字符串（不改变原字符串）。
.substring()：类似于 slice()，但不允许使用负索引。
.substr()（不推荐使用，已废弃）：提取字符串的一部分，但注意它的参数与 slice() 和 substring() 不同。
.replace()：在字符串中替换匹配的子串。
.toUpperCase() 和 .toLowerCase()：将字符串转换为全部大写或小写。
.trim()：去除字符串两端的空白字符。

查找字符串中的字符串

JavaScript 从零计算位置。0 是字符串中的第一个位置，1 是第二个，2 是第三个 ...

indexOf() 方法返回字符串中指定文本首次出现的索引（位置）。

lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引。

如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。

 <h1>JavaScript 字符串方法</h1>
    <p>indexOf() 方法返回指定文本首次出现的位置：</p>
    <p id="demo"></p>
    <script>
        var str = "The full name of China is the People's Republic of China.";
        var c1 = str.indexOf("China");
        document.getElementById("demo").innerHTML = c1;
    </script>


    <p>lastIndexOf() 返回指定文本最后出现的位置：</p>
    <p id="demo1"></p>
    <script>
        var str1 = "The full name of China is the People's Republic of China.";
        var c2 = str1.lastIndexOf("China");
        document.getElementById("demo1").innerHTML = c2;
    </script>


    <p>如果未找到文本，则 indexOf() 和 lastIndexOf() 都返回 -1：</p>
    <p id="demo2"></p>
    <script>
        var str2 = "The full name of China is the People's Republic of China.";
        var pos2 = str2.indexOf("USA");
        document.getElementById("demo2").innerHTML = pos2;
    </script>

两种方法都接受作为检索起始位置的第二个参数。

<p>indexOf() 方法接受第二个参数作为搜索的起始位置：</p>
    <p id="demo3"></p>
    <script>
        var str3 = "The full name of China is the People's Republic of China.";
        var pos2 = str3.indexOf("China", 18);
        document.getElementById("demo3").innerHTML = pos2;
    </script>



    <p>lastIndexOf() 方法接受第二个参数作为搜索的起始位置：</p>
    请记住，lastIndexOf（）方法向后搜索，因此位置 50 表示在第 50 位开始搜索，并搜索到开头。
    <p>位置 50 指的是从开头算起的位置 50。</p>
    <p id="demo4"></p>
    <script>
        var str4 = "The full name of China is the People's Republic of China.";
        var pos4 = str4.lastIndexOf("China", 50);
        document.getElementById("demo4").innerHTML = pos4;
    </script>

检索字符串中的字符串

indexOf() 和 search() 是 JavaScript 中字符串对象（String）的两种方法，它们用于查找字符串中特定子串或正则表达式匹配项的位置。尽管它们的目的相似，但在使用方式、参数类型以及返回值方面存在一些关键差异。

1. `indexOf()`

参数：indexOf() 方法接受一个字符串作为参数，表示要搜索的子串。如果传递的是正则表达式，则会被隐式转换为字符串，但这通常不是你想要的行为。
返回值：返回子串在字符串中首次出现的索引位置（从 0 开始计数）。如果没有找到子串，则返回 -1。
特点：indexOf() 方法对大小写敏感，且只接受字符串作为搜索条件。

2. `search()`

参数：search() 方法接受一个字符串或一个正则表达式作为参数。如果传递的是字符串，则会被隐式地转换为一个正则表达式对象，但通常更推荐使用正则表达式，因为它提供了更强大的匹配能力。
返回值：返回第一个匹配项的索引位置（从 0 开始计数）。如果没有找到任何匹配项，则返回 -1。如果参数不是正则表达式，且不能隐式转换为正则表达式，则抛出 TypeError。
特点：search() 方法对大小写敏感（除非在正则表达式中使用了不区分大小写的标志 i）。它支持使用正则表达式，因此更灵活。

<p>search() 方法返回字符串中指定文本第一次出现的位置：</p>
    <p id="demo5"></p>
    <script>
        var str5 = "The full name of China is the People's Republic of China.";
        var pos5 = str5.search("China");
        document.getElementById("demo5").innerHTML = pos5;
    </script>

slice() 方法

slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。

该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）。

<p>slice() 提取字符串的某个部分，并在新字符串中返回被提取的部分。</p>
    <p id="demo6"></p>
    <script>
        var str6 = "Apple,BBB,VVV";
        var pos6 = str6.slice(7, 13);
        document.getElementById("demo6").innerHTML = pos6;
    </script>


    <p>slice() 提取字符串的某个部分，并在新字符串中返回被提取的部分。</p>
    如果某个参数为负，则从字符串的结尾开始计数
    <p id="demo7"></p>
    <script>
        var str7 = "Apple, Banana, Mango";
        
        var res7 = str7.slice(-13, -7);
        document.getElementById("demo7").innerHTML = res7;
    </script>


 <p>slice() 提取字符串的某个部分，并在新字符串中返回被提取的部分。</p>
    如果省略第二个参数，则该方法将裁剪字符串的剩余部分
    <p id="demo8"></p>

    <script>
        var str8 = "Apple, Banana, Mango";
        var res8 = str8.slice(7);
        document.getElementById("demo8").innerHTML = res8;
    </script>
    或者从结尾计数：
    <p id="demo9"></p>

    <script>
        var str9 = "Apple, Banana, Mango";
        var res9 = str9.slice(-13)
        document.getElementById("demo9").innerHTML = res9;
    </script>

方法太多了，一下总结不完，会持续更新的。

小知识点：在VS Code中可以使用快捷键Ctrl+D向下复制一行。