|
|
@@ -0,0 +1,65 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ .active {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <div class="box"></div>
|
|
|
+ <script>
|
|
|
+
|
|
|
+ var oBox = document.querySelector(".box");
|
|
|
+
|
|
|
+ // var oH1 = document.createElement("h1");
|
|
|
+ // oH1.classList.add("active");
|
|
|
+ // oH1.innerHTML = "hello world";
|
|
|
+ // oBox.append(oH1);
|
|
|
+ // var str = "hello world";
|
|
|
+ // oBox.innerHTML = "<h1 class='active'>"+str+"</h1>";
|
|
|
+ // oBox.innerHTML = `<h1 class="active">
|
|
|
+ // ${str}
|
|
|
+ // </h1>`
|
|
|
+
|
|
|
+ // 模板字符串 ``
|
|
|
+ // 1. 可以换行
|
|
|
+ // 2. 可以在字符串中使用变量 ${变量名}
|
|
|
+ // 3. 内部不区分单引号和双引号
|
|
|
+
|
|
|
+ let str = "username=张三;";
|
|
|
+ let str2 = "hello";
|
|
|
+ let str3 = " world ";
|
|
|
+ // startsWith 检查字符串是否以指定的字符串开头
|
|
|
+ // console.log(str.startsWith("username"));
|
|
|
+ // endsWith 检查字符串是否以指定的字符串结尾
|
|
|
+ // console.log(str.endsWith(";"));
|
|
|
+ // repeat 重复字符串指定次数
|
|
|
+ // console.log(str.repeat(2));
|
|
|
+
|
|
|
+ // padStart 字符串补全指定长度 从左侧开始补全
|
|
|
+ // console.log(str2.padStart(10,"*"));
|
|
|
+ // padEnd 字符串补全指定长度 从右侧开始补全
|
|
|
+ // console.log(str2.padEnd(10,"*"));
|
|
|
+
|
|
|
+ console.log(str3);
|
|
|
+
|
|
|
+ // trim 去除字符串首尾空格
|
|
|
+ // console.log(str3.trim());
|
|
|
+ //trimStart 去除字符串左侧空格
|
|
|
+ // console.log(str3.trimStart());
|
|
|
+ // trimEnd 去除字符串右侧空格
|
|
|
+ // console.log(str3.trimEnd());
|
|
|
+
|
|
|
+ console.log(str2.at(0));
|
|
|
+
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
