【JavaScript-Day 7】深入探索 JavaScript 中的数字 (Number) 与文本处理核心 (String)

Langchain系列文章目录

01-玩转LangChain：从模型调用到Prompt模板与输出解析的完整指南
02-玩转 LangChain Memory 模块：四种记忆类型详解及应用场景全覆盖
03-全面掌握 LangChain：从核心链条构建到动态任务分配的实战指南
04-玩转 LangChain：从文档加载到高效问答系统构建的全程实战
05-玩转 LangChain：深度评估问答系统的三种高效方法（示例生成、手动评估与LLM辅助评估）
06-从 0 到 1 掌握 LangChain Agents：自定义工具 + LLM 打造智能工作流！
07-【深度解析】从GPT-1到GPT-4：ChatGPT背后的核心原理全揭秘
08-【万字长文】MCP深度解析：打通AI与世界的“USB-C”，模型上下文协议原理、实践与未来

Python系列文章目录

PyTorch系列文章目录

机器学习系列文章目录

深度学习系列文章目录

Java系列文章目录

JavaScript系列文章目录

01-【JavaScript-Day 1】从零开始：全面了解 JavaScript 是什么、为什么学以及它与 Java 的区别
02-【JavaScript-Day 2】开启 JS 之旅：从浏览器控制台到 ＜script＞ 标签的 Hello World 实践
03-【JavaScript-Day 3】掌握JS语法规则：语句、分号、注释与大小写敏感详解
04-【JavaScript-Day 4】var 完全指南：掌握变量声明、作用域及提升
05-【JavaScript-Day 5】告别 var 陷阱：深入理解 let 和 const 的妙用
06-【JavaScript-Day 6】从零到精通：JavaScript 原始类型 String, Number, Boolean, Null, Undefined, Symbol, BigInt 详解
07-【JavaScript-Day 7】深入探索 JavaScript 中的数字 (Number) 与文本处理核心 (String)

---

---

前言

在上一篇【JavaScript-Day 6】我们初步认识了 JavaScript 中的七种原始数据类型，它们是构建程序逻辑的基石。今天，我们将深入其中两种最为常用且基础的类型：Number（数字）和 String（字符串）。无论是进行数学运算、处理用户输入，还是动态生成网页内容，都离不开对数字和字符串的熟练操作。本篇将带你详细了解它们的特性、常见方法以及在实际开发中的应用场景，助你打下坚实的基础。

一、数字类型 (Number) 详解

JavaScript 中的数字类型（Number）用于表示整数和浮点数。与其他一些编程语言不同，JavaScript 不区分整数类型和浮点数类型，所有数字都以双精度 64 位浮点数格式（IEEE 754 标准）存储。

1.1 数字类型的基本表示

1.1.1 整数与浮点数

JavaScript 中的数字可以直接以字面量的形式表示。

• 整数 (Integers)：可以是正数、负数或零。

  let positiveInteger = 100;
  let negativeInteger = -25;
  let zero = 0;
  
  console.log(positiveInteger); // 输出: 100
  console.log(typeof positiveInteger); // 输出: number
  

• 浮点数 (Floating-point numbers)：即带有小数点的数字。也可以使用科学计数法（e 或 E）表示。

  let pi = 3.14159;
  let price = 99.9;
  let largeNumber = 1.23e6; // 相当于 1.23 * 10^6 = 1230000
  let smallNumber = 5e-3;  // 相当于 5 * 10^-3 = 0.005
  
  console.log(pi);         // 输出: 3.14159
  console.log(typeof pi);  // 输出: number
  console.log(largeNumber); // 输出: 1230000
  console.log(smallNumber); // 输出: 0.005
  

  注意：由于浮点数的存储机制，进行浮点数运算时可能会遇到精度问题。

  console.log(0.1 + 0.2); // 输出可能不是精确的 0.3，而是 0.30000000000000004
  

  在需要高精度计算的场景（如金融计算），可能需要借助专门的库或使用整数进行换算。

1.1.2 特殊数值：NaN 与 Infinity

JavaScript 的 Number 类型还包含几个特殊的数值。

（1） NaN (Not a Number)

NaN 是一个特殊的数字值，表示“非数字”（Not a Number）。它通常在数学运算无法返回一个有效的数字时出现。

• 产生场景：
  • 将无法转换为数字的字符串转换为数字：parseInt("abc")、Number("hello")
  • 无效的数学运算：0 / 0、Math.sqrt(-1)

  console.log(parseInt("你好"));    // 输出: NaN
  console.log(Number("world"));   // 输出: NaN
  console.log(0 / 0);             // 输出: NaN
  console.log(Math.sqrt(-4));     // 输出: NaN
  console.log(NaN + 5);           // 输出: NaN (任何涉及 NaN 的运算结果都是 NaN)
  

• 特性：
  • NaN 是 JavaScript 中唯一一个不等于自身的值。

    console.log(NaN === NaN); // 输出: false
    console.log(NaN == NaN);  // 输出: false
    

  • 判断一个值是否为 NaN，应该使用 isNaN() 函数或 Number.isNaN() 方法 (ES6推荐)。

    let result = 0 / 0;
    console.log(isNaN(result));         // 输出: true
    console.log(Number.isNaN(result));  // 输出: true (更可靠，因为它不会尝试将参数转换为数字)
    
    console.log(isNaN("hello"));        // 输出: true (因为 "hello" 会被尝试转换为数字，得到 NaN)
    console.log(Number.isNaN("hello")); // 输出: false (因为 "hello" 本身不是 NaN)
    

（2） Infinity 与 -Infinity

Infinity 表示正无穷大，-Infinity 表示负无穷大。

• 产生场景：
  • 一个非零数字除以 0：5 / 0
  • 超出 JavaScript 数字表示范围的数值

  console.log(10 / 0);        // 输出: Infinity
  console.log(-10 / 0);       // 输出: -Infinity
  console.log(Infinity * 2);  // 输出: Infinity
  console.log(Infinity / Infinity); // 输出: NaN
  

• 特性：
  • 可以使用 isFinite() 函数来判断一个数值是否是有限的（既不是 Infinity 也不是 -Infinity，也不是 NaN）。

  console.log(isFinite(100));       // 输出: true
  console.log(isFinite(Infinity));  // 输出: false
  console.log(isFinite(-Infinity)); // 输出: false
  console.log(isFinite(NaN));       // 输出: false
  

1.2 常用 Number 方法与属性

Number 对象也提供了一些内置的方法和属性，方便我们对数字进行操作和转换。

1.2.1 toFixed()：格式化小数位数

toFixed() 方法可以将一个数字转换为字符串，并保留指定位数的小数。它会进行四舍五入。

• 语法：number.toFixed(digits)
• 参数：digits (可选) - 小数点后保留的位数，范围是 0 到 20（或更高，取决于实现），默认为 0。
• 返回值：一个表示给定数字的字符串，不会使用科学计数法。

let num1 = 3.1415926;
console.log(num1.toFixed(2)); // 输出: "3.14" (四舍五入)
console.log(num1.toFixed(0)); // 输出: "3" (四舍五入)
console.log(num1.toFixed(5)); // 输出: "3.14159"

let num2 = 123;
console.log(num2.toFixed(2)); // 输出: "123.00"

let num3 = 1.23e+5; // 123000
console.log(num3.toFixed(3)); // 输出: "123000.000"

应用场景：常用于显示价格、百分比等需要固定小数位数的情况。

1.2.2 parseInt()：转换为整数

parseInt() 函数（全局函数，也可以通过 Number.parseInt() 调用）用于解析一个字符串参数，并返回一个指定基数（进制）的整数。

• 语法：parseInt(string, radix)
• 参数：
  • string：要被解析的字符串。如果 string 不是一个字符串，则会先将其转换为字符串。字符串开头的空白符会被忽略。
  • radix (可选)：一个介于 2 和 36 之间的整数，表示 string 的基数（进制）。如果省略或为 0，则基数会根据字符串的开头来自动判断（例如，0x 开头为十六进制，0 开头在旧版浏览器可能为八进制，但 ES5 后不再支持，推荐总是明确指定基数）。
• 返回值：从给定字符串中解析出的一个整数。如果第一个非空白字符不能转换为数字，则返回 NaN。

console.log(parseInt("100"));         // 输出: 100 (默认十进制)
console.log(parseInt("100.50"));      // 输出: 100 (小数点后被截断)
console.log(parseInt("  200px"));    // 输出: 200 (会忽略开头的数字，并忽略后续非数字字符)
console.log(parseInt("0xFF"));        // 输出: 255 (十六进制，没有指定radix时自动识别)
console.log(parseInt("FF", 16));      // 输出: 255 (明确指定十六进制)
console.log(parseInt("101", 2));      // 输出: 5   (二进制)
console.log(parseInt("hello"));       // 输出: NaN
console.log(parseInt(""));             // 输出: NaN
console.log(Number.parseInt("42stars"));// 输出: 42 (ES6推荐用法)

实用技巧：当需要从带有单位的字符串（如 “100px”, “20rem”）中提取数值部分时，parseInt() 非常有用。

1.2.3 parseFloat()：转换为浮点数

parseFloat() 函数（全局函数，也可以通过 Number.parseFloat() 调用）用于解析一个字符串参数，并返回一个浮点数。

• 语法：parseFloat(string)
• 参数：string：要被解析的字符串。如果 string 不是一个字符串，则会先将其转换为字符串。字符串开头的空白符会被忽略。
• 返回值：从给定字符串中解析出的一个浮点数。如果第一个非空白字符不能转换为数字，则返回 NaN。

console.log(parseFloat("3.14"));        // 输出: 3.14
console.log(parseFloat("  3.14159  ")); // 输出: 3.14159
console.log(parseFloat("3.14abc"));     // 输出: 3.14 (忽略后续非数字字符)
console.log(parseFloat("0.05e+2"));     // 输出: 5 (支持科学计数法)
console.log(parseFloat("100"));         // 输出: 100
console.log(parseFloat("PI is 3.14"));  // 输出: NaN (因为开头不是数字)
console.log(Number.parseFloat("18.99€"));// 输出: 18.99 (ES6推荐用法)

与 parseInt() 的区别：

• parseFloat() 会识别并解析第一个小数点，而 parseInt() 遇到小数点会停止解析（如果小数点在第一个字符之后）。
• parseFloat() 始终以十进制解析，没有 radix 参数。

1.2.4 其他 Number 属性 (了解)

• Number.MAX_VALUE：JavaScript 中可表示的最大正数。
• Number.MIN_VALUE：JavaScript 中可表示的最小正数（最接近 0 的正数，而不是最小的负数）。
• Number.POSITIVE_INFINITY：等同于全局的 Infinity。
• Number.NEGATIVE_INFINITY：等同于全局的 -Infinity。
• Number.EPSILON (ES6)：表示 1 与大于 1 的最小浮点数之间的差值，用于处理浮点数比较时的精度问题。

console.log(Number.MAX_VALUE); // 输出: 1.7976931348623157e+308
console.log(Number.MIN_VALUE); // 输出: 5e-324

二、字符串类型 (String) 详解

字符串（String）类型用于表示文本数据。它是由零个或多个 16 位 Unicode 字符组成的序列。

2.1 字符串的创建与表示

2.1.1 使用引号创建字符串

在 JavaScript 中，字符串可以使用单引号 (')、双引号 (") 或反引号 (`) (ES6 模板字符串) 包裹。

• 单引号 (') 和双引号 (")：功能上没有区别，主要根据个人或团队的编码风格选择。如果字符串内部需要包含同种引号，需要进行转义，或者使用另一种引号包裹。

  let greeting1 = "Hello, World!";
  let greeting2 = '你好，世界！';
  let message1 = "She said, \"Hi!\""; // 使用双引号，内部双引号需要转义
  let message2 = 'He replied, \'Hello there!\''; // 使用单引号，内部单引号需要转义
  let message3 = "It's a sunny day."; // 内部有单引号，外部使用双引号则无需转义
  let message4 = 'The book title is "JavaScript Mastery".'; // 内部有双引号，外部使用单引号则无需转义
  
  console.log(greeting1);
  console.log(message1);
  

• 反引号 (`) - 模板字符串 (Template Literals/Strings)：ES6 引入，功能更强大。

  • 支持多行字符串：可以直接换行，而不需要使用 \n。
  • 支持插值表达式：可以在字符串中嵌入变量或表达式，使用 ${expression} 语法。

  // 多行字符串
  let multiLineString = `This is a string
  that spans across
  multiple lines.`;
  console.log(multiLineString);
  /*
  输出:
  This is a string
  that spans across
  multiple lines.
  */
  
  // 插值表达式
  let name = "Alice";
  let age = 30;
  let sentence = `My name is ${name} and I am ${age} years old.`;
  console.log(sentence); // 输出: My name is Alice and I am 30 years old.
  
  let price = 10;
  let tax = 0.05;
  let totalMessage = `The total price is $${(price * (1 + tax)).toFixed(2)}.`;
  console.log(totalMessage); // 输出: The total price is $10.50.
  

  模板字符串因其便利性和可读性，在现代 JavaScript 开发中被广泛使用。

2.1.2 字符串的不可变性 (Immutability)

JavaScript 中的字符串是不可变的。这意味着一旦字符串被创建，它的内容就不能被修改。所有看起来修改了字符串的方法，实际上都是返回了一个新的字符串，而原始字符串保持不变。

let str = "Hello";
str[0] = "h"; // 尝试修改第一个字符，不会生效，也不会报错
console.log(str); // 输出: "Hello" (原始字符串未改变)

let upperStr = str.toUpperCase();
console.log(upperStr); // 输出: "HELLO" (返回了新的字符串)
console.log(str);      // 输出: "Hello" (原始字符串依然不变)

理解字符串的不可变性对于避免一些潜在的 bug 和优化性能非常重要。

2.2 字符串的常用属性与方法

2.2.1 length 属性：获取字符串长度

length 属性返回字符串中字符的数量（基于 16 位编码单元）。

let text = "JavaScript";
console.log(text.length); // 输出: 10

let emptyString = "";
console.log(emptyString.length); // 输出: 0

let emojiString = "你好😊"; // 注意：一些 emoji 可能由多个 Unicode 编码单元组成
console.log(emojiString.length); // 输出: 3 (中文字符各占1个，😊 emoji 占1个 UTF-16 编码单元)
                                // 对于复杂的 Unicode 字符 (如一些 emoji 辅助平面字符)，length 可能不符合直觉。

2.2.2 字符串拼接

有多种方式可以拼接字符串：

• 加号 (+) 运算符：

  let firstName = "John";
  let lastName = "Doe";
  let fullName = firstName + " " + lastName;
  console.log(fullName); // 输出: "John Doe"
  
  let str1 = "The number is: ";
  let num = 42;
  let result = str1 + num; // 数字会隐式转换为字符串再拼接
  console.log(result);   // 输出: "The number is: 42"
  

• concat() 方法：

  let s1 = "Hello";
  let s2 = ", ";
  let s3 = "World!";
  let combined = s1.concat(s2, s3);
  console.log(combined); // 输出: "Hello, World!"
  // concat() 可以接受多个参数
  

  虽然 concat() 也可以实现拼接，但通常使用 + 或模板字符串更为常见和简洁。
• 模板字符串 (推荐)：

  let user = "Admin";
  let action = "logged in";
  let logMessage = `${user} has ${action}.`;
  console.log(logMessage); // 输出: "Admin has logged in."
  

2.2.3 常用字符串方法

JavaScript 为字符串提供了丰富的方法来进行查找、提取、转换等操作。

（1） indexOf() 和 lastIndexOf()：查找子字符串位置

• indexOf(searchValue, fromIndex)：从字符串的开头（或指定的 fromIndex）开始查找 searchValue，返回第一次出现的索引。如果未找到，则返回 -1。
• lastIndexOf(searchValue, fromIndex)：从字符串的末尾（或指定的 fromIndex 向前）开始查找 searchValue，返回最后一次出现的索引。如果未找到，则返回 -1。

let sentence = "The quick brown fox jumps over the lazy dog. The fox is quick.";
console.log(sentence.indexOf("fox"));        // 输出: 16 (第一次出现 "fox" 的位置)
console.log(sentence.indexOf("fox", 20));    // 输出: 42 (从索引 20 开始查找 "fox")
console.log(sentence.indexOf("cat"));        // 输出: -1 (未找到)

console.log(sentence.lastIndexOf("fox"));    // 输出: 42 (最后一次出现 "fox" 的位置)
console.log(sentence.lastIndexOf("fox", 40));// 输出: 16 (从索引 40 向前查找 "fox")
console.log(sentence.lastIndexOf("The", 0)); // 输出: 0 (从索引 0 向前查找 "The")

应用场景：判断字符串是否包含某个子串，获取子串位置等。

（2） includes() (ES6)：检查是否包含子字符串

includes(searchValue, position) 方法判断一个字符串是否包含在另一个字符串中，根据情况返回 true 或 false。

• 语法：string.includes(searchValue, position)
• 参数：
  • searchValue：要查找的子字符串。
  • position (可选)：从当前字符串的哪个索引位置开始搜寻子字符串，默认为 0。

let str = "Hello world, welcome to the universe.";
console.log(str.includes("world"));    // 输出: true
console.log(str.includes("World"));    // 输出: false (大小写敏感)
console.log(str.includes("world", 12)); // 输出: false (从索引12开始，"world" 在这之前)
console.log(str.includes("to the")); // 输出: true

相比 indexOf() 返回 -1 来判断是否存在，includes() 更直观。

（3） slice()：提取字符串片段

slice(startIndex, endIndex) 方法提取字符串的一部分，并返回一个新的字符串，原始字符串不变。

• 语法：string.slice(startIndex, endIndex)
• 参数：
  • startIndex：提取的起始索引。如果是负数，则从字符串尾部开始计算 (例如，-1 指的是最后一个字符)。
  • endIndex (可选)：提取的结束索引（不包括该索引处的字符）。如果省略，则提取到字符串末尾。如果是负数，也从字符串尾部开始计算。

let text = "JavaScript";
// J  a  v  a  S  c  r  i  p  t
// 0  1  2  3  4  5  6  7  8  9
//-10-9 -8 -7 -6 -5 -4 -3 -2 -1

console.log(text.slice(0, 4));  // 输出: "Java" (从索引0到索引3)
console.log(text.slice(4));     // 输出: "Script" (从索引4到末尾)
console.log(text.slice(-6));    // 输出: "Script" (从倒数第6个字符到末尾)
console.log(text.slice(1, -3)); // 输出: "avaScr" (从索引1到倒数第3个字符之前)
console.log(text.slice(-3, -1));// 输出: "ip" (从倒数第3个到倒数第1个字符之前)
console.log(text.slice(5, 1));  // 输出: "" (如果 startIndex 大于 endIndex，返回空字符串)

（4） substring()：提取字符串片段 (类似 slice 但有差异)

substring(startIndex, endIndex) 方法也用于提取字符串的一部分，但其处理参数的方式与 slice() 有些不同。

• 语法：string.substring(startIndex, endIndex)
• 参数：
  • startIndex：提取的起始索引。
  • endIndex (可选)：提取的结束索引（不包括该索引处的字符）。
• 行为差异：
  • 如果 startIndex 或 endIndex 为负数，或者为 NaN，则被当作 0 处理。
  • 如果 startIndex 大于 endIndex，则 substring() 会交换这两个参数。

let text = "JavaScript";
console.log(text.substring(0, 4));  // 输出: "Java" (同 slice)
console.log(text.substring(4));     // 输出: "Script" (同 slice)

// 与 slice 的差异点：
console.log(text.substring(-3));    // 输出: "JavaScript" (负数被当作0，substring(0))
console.log(text.slice(-3));      // 输出: "ipt"

console.log(text.substring(4, 0));  // 输出: "Java" (参数被交换为 substring(0, 4))
console.log(text.slice(4, 0));      // 输出: "" (startIndex > endIndex)

虽然 substring 也能用，但 slice 的行为通常更符合直觉，尤其是在处理负数索引时。大多数情况下推荐使用 slice。

（5） substr()：提取指定长度的子串 (已不推荐使用)

substr(startIndex, length) 方法从 startIndex 开始提取指定 length 长度的子字符串。

• 注意：此方法在 ECMAScript 标准中已被标记为“Annex B”特性，意味着它不是核心 ECMAScript 语言的一部分，主要为了兼容旧版浏览器。强烈建议使用 slice() 或 substring() 替代。

let text = "JavaScript";
console.log(text.substr(0, 4)); // 输出: "Java" (从索引0开始，取4个字符)
console.log(text.substr(4, 6)); // 输出: "Script" (从索引4开始，取6个字符)
console.log(text.substr(-6, 6)); // 输出: "Script" (如果 startIndex 是负数，它表示从字符串末尾开始的字符。)

（6） toUpperCase() 和 toLowerCase()：大小写转换

• toUpperCase()：将字符串中的所有字符转换为大写。
• toLowerCase()：将字符串中的所有字符转换为小写。

let greeting = "Hello, World!";
console.log(greeting.toUpperCase()); // 输出: "HELLO, WORLD!"
console.log(greeting.toLowerCase()); // 输出: "hello, world!"

应用场景：常用于不区分大小写的比较，或统一用户输入的格式。

let userInput = " Yes ";
let normalizedInput = userInput.toLowerCase().trim(); // 先转小写再去除两端空格
if (normalizedInput === "yes") {
    console.log("User confirmed.");
}

（7） trim(), trimStart() (ES2019), trimEnd() (ES2019)：去除空白

• trim()：移除字符串两端的空白字符（包括空格、制表符、换行符等）。
• trimStart() 或 trimLeft() (别名)：移除字符串头部的空白字符。
• trimEnd() 或 trimRight() (别名)：移除字符串尾部的空白字符。

let paddedString = "   Hello World   ";
console.log(`'${paddedString.trim()}'`);        // 输出: "'Hello World'"
console.log(`'${paddedString.trimStart()}'`);  // 输出: "'Hello World   '"
console.log(`'${paddedString.trimEnd()}'`);    // 输出: "'   Hello World'"

let onlySpaces = "     ";
console.log(`'${onlySpaces.trim()}'`);        // 输出: "''" (空字符串)

应用场景：处理用户输入时，去除多余的空格，确保数据的一致性。

（8） replace() 和 replaceAll() (ES2021)：替换子字符串

• replace(searchValue, newValue)：查找 searchValue（可以是字符串或正则表达式），并用 newValue（可以是字符串或替换函数）替换第一个匹配项。
• replaceAll(searchValue, newValue)：查找 searchValue（可以是字符串或全局正则表达式），并用 newValue（可以是字符串或替换函数）替换所有匹配项。

let message = "The old house has an old window and an old door.";

// replace 只替换第一个匹配项
let newMessage1 = message.replace("old", "new");
console.log(newMessage1); // 输出: "The new house has an old window and an old door."

// 使用正则表达式的全局标志 g 进行全局替换 (传统方式)
let newMessage2 = message.replace(/old/g, "new");
console.log(newMessage2); // 输出: "The new house has a new window and a new door."

// 使用 replaceAll (ES2021, 更简洁)
let newMessage3 = message.replaceAll("old", "new");
console.log(newMessage3); // 输出: "The new house has a new window and a new door."

// 使用函数作为 newValue
let prices = "Items: $10, $20, $30";
let convertedPrices = prices.replaceAll(/\$(\d+)/g, (match, p1) => {
    // match 是整个匹配到的字符串 (如 "$10")
    // p1 是第一个捕获组的内容 (如 "10")
    return `¥${parseInt(p1) * 7}`; // 假设汇率 1 USD = 7 CNY
});
console.log(convertedPrices); // 输出: "Items: ¥70, ¥140, ¥210"

（9） split()：将字符串分割为数组

split(separator, limit) 方法使用指定的 separator 将一个字符串分割成一个子字符串数组。

• 语法：string.split(separator, limit)
• 参数：
  • separator：指定用于分割字符串的字符或正则表达式。如果省略或为 undefined，则返回包含整个字符串的单元素数组。如果 separator 是空字符串 ""，则字符串会在每个字符之间分割。
  • limit (可选)：一个整数，限定返回的分割片段数量。

let fruits = "apple,banana,orange,grape";
let fruitArray = fruits.split(",");
console.log(fruitArray); // 输出: ["apple", "banana", "orange", "grape"]

let sentence = "Hello World JavaScript";
let words = sentence.split(" ");
console.log(words);      // 输出: ["Hello", "World", "JavaScript"]

let chars = "abc".split("");
console.log(chars);      // 输出: ["a", "b", "c"]

let data = "item1|item2|item3|item4";
let limitedData = data.split("|", 2);
console.log(limitedData); // 输出: ["item1", "item2"]

应用场景：处理 CSV 数据，解析URL参数，将句子分解为单词等。

（10） startsWith() (ES6) 和 endsWith() (ES6)：检查开头或结尾

• startsWith(searchString, position)：判断当前字符串是否以指定的 searchString 开头，返回 true 或 false。position 参数可选，表示开始搜索的位置，默认为 0。
• endsWith(searchString, length)：判断当前字符串是否以指定的 searchString 结尾，返回 true 或 false。length 参数可选，表示字符串的有效长度，默认为字符串的实际长度。

let filename = "document.pdf";
console.log(filename.startsWith("doc"));   // 输出: true
console.log(filename.startsWith("Doc"));   // 输出: false (大小写敏感)
console.log(filename.startsWith("ument", 3)); // 输出: true (从索引3开始 "ument.pdf" 以 "ument" 开头)

console.log(filename.endsWith(".pdf"));    // 输出: true
console.log(filename.endsWith(".PDF"));    // 输出: false (大小写敏感)
console.log(filename.endsWith("document", 8)); // 输出: true ("document" 以 "document" 结尾)

应用场景：文件类型判断，URL 格式校验等。

2.3 场景驱动：字符串与数字的实际应用

2.3.1 表单验证：用户输入的处理

在网页表单中，用户输入的内容通常是字符串。我们需要将其转换为合适的数字类型进行校验或计算，并对格式进行规范。

// 假设这是从输入框获取的值
let userInputAge = " 25 ";
let userInputAmount = "100.99USD";

// 1. 清理并转换为数字
let ageString = userInputAge.trim();
let age = parseInt(ageString);

if (!Number.isNaN(age) && age >= 18 && age <= 120) {
    console.log(`年龄有效: ${age}`);
} else {
    console.log("输入的年龄无效或不在允许范围内。");
}

// 2. 提取金额
let amountString = userInputAmount.trim();
let amount = parseFloat(amountString); // 会提取开头的数字 "100.99"

if (!Number.isNaN(amount) && amount > 0) {
    console.log(`金额有效: ${amount.toFixed(2)}`);
} else {
    console.log("输入的金额无效。");
}

2.3.2 动态生成 HTML 内容

模板字符串在动态构建 HTML 时非常有用，可以清晰地将变量嵌入到 HTML 结构中。

function createProductCard(product) {
    // product 对象: { name: "Laptop", price: 1200.50, image: "laptop.jpg" }
    const cardHTML = `
        <div class="product-card">
            <img src="images/${product.image}" alt="${product.name}">
            <h3>${product.name}</h3>
            <p>Price: $${product.price.toFixed(2)}</p>
            <button>Add to Cart</button>
        </div>
    `;
    return cardHTML;
}

let myProduct = { name: "Super Mouse", price: 25.99, image: "mouse.png" };
let productElement = createProductCard(myProduct);
// 假设有一个 id 为 "product-container" 的 div
// document.getElementById("product-container").innerHTML = productElement;
console.log(productElement);
/*
输出 (大致):
<div class="product-card">
    <img src="images/mouse.png" alt="Super Mouse">
    <h3>Super Mouse</h3>
    <p>Price: $25.99</p>
    <button>Add to Cart</button>
</div>
*/

2.3.3 解析 URL 参数

URL 中的查询参数通常是 key=value 形式的字符串，我们需要解析它们。

function getQueryParam(url, paramName) {
    const queryString = url.split('?')[1]; // 获取 '?' 后面的部分
    if (!queryString) {
        return null;
    }

    const params = queryString.split('&'); // 按 '&' 分割参数
    for (let param of params) {
        const [key, value] = param.split('='); // 按 '=' 分割键值
        if (key === paramName) {
            return decodeURIComponent(value || ""); // 解码并返回值
        }
    }
    return null;
}

let sampleUrl = "[https://example.com/search?query=javascript%20tutorial&page=2](https://example.com/search?query=javascript%20tutorial&page=2)";
let queryValue = getQueryParam(sampleUrl, "query");
let pageValue = getQueryParam(sampleUrl, "page");

console.log(queryValue); // 输出: "javascript tutorial"
console.log(pageValue);  // 输出: "2" (字符串 "2"，可能需要 parseInt)

let pageNumber = parseInt(pageValue);
if(!Number.isNaN(pageNumber)) {
    console.log(`Current page: ${pageNumber}`); // 输出: Current page: 2
}

三、总结

本篇文章我们深入探讨了 JavaScript 中的 Number 和 String 两种核心数据类型。

• 关于 Number 类型：

  1. JavaScript 中的数字不区分整数和浮点数，均以 64 位浮点数存储。
  2. 认识了特殊数值 NaN (非数字) 和 Infinity (无穷大)，以及如何使用 isNaN()、Number.isNaN() 和 isFinite() 进行判断。
  3. 掌握了常用的 Number 方法：
     • toFixed(): 用于格式化数字为指定小数位数的字符串。
     • parseInt(): 用于将字符串解析为整数，可指定进制。
     • parseFloat(): 用于将字符串解析为浮点数。
  4. 了解了浮点数运算可能存在的精度问题。

• 关于 String 类型：

  1. 字符串可以通过单引号、双引号或反引号（模板字符串）创建。模板字符串支持多行和插值，非常实用。
  2. 字符串是不可变的，任何修改字符串的方法都会返回一个新的字符串。
  3. length 属性用于获取字符串长度。
  4. 掌握了多种字符串拼接方式，其中模板字符串最为推荐。
  5. 学习了大量实用的字符串方法：
     • 查找与判断: indexOf(), lastIndexOf(), includes(), startsWith(), endsWith()
     • 提取: slice(), substring() (注意与 slice 的区别，substr() 已不推荐)
     • 转换: toUpperCase(), toLowerCase(), trim(), trimStart(), trimEnd()
     • 替换: replace(), replaceAll() (ES2021)
     • 分割: split()

• 实践应用：

  1. 通过表单验证、动态生成 HTML 和解析 URL 参数等场景，展示了数字和字符串在实际开发中的结合运用。

熟练掌握 Number 和 String 的特性和方法，是编写高效、健壮 JavaScript 代码的基础。在接下来的学习中，我们会继续探索 JavaScript 其他数据类型和更多强大的功能。

---