WEB前端网页设计- JavaScript 字符串 & JavaScript 模板字符串_前端模板字符串

目录

JavaScript 字符串

JavaScript 字符串

字符串长度

特殊字符

字符串可以是对象

字符串属性和方法

字符串属性

字符串方法

JavaScript 模板字符串

语法

浏览器支持

---

JavaScript 字符串

---

JavaScript 字符串用于存储和处理文本。

---

JavaScript 字符串

字符串可以存储一系列字符，如 "John Doe"。

字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号：

var carname = "Volvo XC60";
var carname = 'Volvo XC60';

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

var character = carname[7];

字符串的索引从 0 开始，这意味着第一个字符索引值为 [0]，第二个为 [1]，以此类推。

const name = "RUNOOB";
let letter = name[2];
 
document.getElementById("demo").innerHTML = letter;

你可以在字符串中使用引号，字符串中的引号不要与字符串的引号相同:

var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';

你也可以在字符串添加转义字符来使用引号：

var x = 'It\'s alright';
var y = "He is called \"Johnny\"";

---

字符串长度

可以使用内置属性 length 来计算字符串的长度：

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

---

特殊字符

在 JavaScript 中，字符串写在单引号或双引号中。

因为这样，以下实例 JavaScript 无法解析：

 "We are the so-called "Vikings" from the north."

字符串 "We are the so-called " 被截断。

如何解决以上的问题呢？可以使用反斜杠 (\) 来转义 "Vikings" 字符串中的双引号，如下:

 "We are the so-called \"Vikings\" from the north."

 反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符：

转义字符 (\) 可以用于转义撇号，换行，引号，等其他特殊字符。

下表中列举了在字符串中可以使用转义字符转义的特殊字符：

---

字符串可以是对象

通常， JavaScript 字符串是原始值，可以使用字符创建： var firstName = "John"

但我们也可以使用 new 关键字将字符串定义为一个对象： var firstName = new String("John")

var x = "John";
var y = new String("John");
typeof x // 返回 String
typeof y // 返回 Object

var x = "John";             
var y = new String("John");
(x === y) // 结果为 false，因为 x 是字符串，y 是对象

=== 为绝对相等，即数据类型与值都必须相等。

---

字符串属性和方法

原始值字符串，如 "John", 没有属性和方法(因为他们不是对象)。

原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行方法和属性时可以把原始值当作对象。

字符串方法我们将在下一章节中介绍。

---

字符串属性

---

字符串方法

---

JavaScript 模板字符串

JavaScript 中的模板字符串是一种方便的字符串语法，允许你在字符串中嵌入表达式和变量。

模板字符串使用反引号 `` 作为字符串的定界符分隔的字面量。

模板字面量是用反引号（`）分隔的字面量，允许多行字符串、带嵌入表达式的字符串插值和一种叫带标签的模板的特殊结构。

语法

`string text`
 
`string text line 1
 string text line 2`
 
`string text ${expression} string text`
 
tagFunction`string text ${expression} string text`

参数

• string text：将成为模板字面量的一部分的字符串文本。几乎允许所有字符，包括换行符和其他空白字符。但是，除非使用了标签函数，否则无效的转义序列将导致语法错误。

• expression：要插入当前位置的表达式，其值被转换为字符串或传递给 tagFunction。

• tagFunction：如果指定，将使用模板字符串数组和替换表达式调用它，返回值将成为模板字面量的值。

let text = `Hello CSDN!`;

浏览器支持

模板字面量是 ES6 新特性 (JavaScript 2015)，目前一些最新版本浏览器都支持：

模板字符串中可以同时使用单引号和双引号：

let text = `He's often called "CSDN"`;

模板字符串还支持多行文本，而无需使用特殊的转义字符：

const multiLineText = `
  This is
  a multi-line
  text.
`;

若要转义模板字面量中的反引号（`），需在反引号之前加一个反斜杠（\）。

`\`` === "`"; // true

模板字面量用反引号（`）括起来，而不是双引号（"）或单引号（'）。

除了普通字符串外，模板字面量还可以包含占位符——一种由美元符号和大括号分隔的嵌入式表达式：${expression}。

字符串和占位符被传递给一个函数（要么是默认函数，要么是自定义函数）。默认函数（当未提供自定义函数时）只执行字符串插值来替换占位符，然后将这些部分拼接到一个字符串中。

模板字符串中允许我们使用变量：

const name = 'Runoob';
const age = 30;
const message = `My name is ${name} and I'm ${age} years old.`;

以上实例中，${name} 和 ${age} 是模板字符串的表达式部分，它们被包含在 ${} 内部，并在运行时求值。

模板字符串允许你在字符串中引用变量、执行函数调用和进行任意的JavaScript表达式。

模板字符串中允许我们使用表达式：

let price = 10;
let VAT = 0.25;
 
let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

模板字符串当作 HTML 模板使用：

let header = "";
let tags = ["RUNOOB", "GOOGLE", "TAOBAO"];
 
let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`;
}
 
html += `</ul>`;