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向下复制一行。
