让开发者生活更轻松的 JavaScript 字符串方

让开发者生活更轻松的 JavaScript 字符串方法

avaScript 最初被引入作为一种简单的客户端脚本语言，但现在，它已经成为一种真正的 WORA（一次编写到处运行）语言，使开发者能够构建桌面、移动、电视、CLI 和嵌入式应用程序。JavaScript 的初学者友好语法、生产性语言特性和良好管理的 ECMAScript 规范，激励了所有人使用 JavaScript 进行通用编程。

ECMAScript 标准通过提供许多语言特性来提高开发者的生产力。它通过内置的 String 对象引入了几种字符串方法，使开发者能够高效地处理字符串数据。这些高效的字符串方法激励开发者使用 JavaScript 解决文本处理问题，而无需使用外部库或从头编写冗长的代码。

在本教程中，将解释必须了解的 JavaScript 字符串处理方法，让你能够编写干净、自解释的代码。

使用at()方法进行简洁的负索引访问

JavaScript 在字符串和数组对象中实现了传统的基于方括号的索引元素访问，但由于语言设计的限制，它不像 Python 那样实现负索引支持。例如，下面代码片段中的第二条日志语句返回 undefined，因为它尝试查找的是对象属性而不是索引元素：

let m='JavaScript';
console.log(m[m.length - 1]);  // t
console.log(m[-1]);            // undefined

可以使用 JavaScript 的 Proxy 对象实现字符串的负索引支持，但这不如在字符串和数组对象中实现的内置 at() 方法高效。at() 方法让我们可以简化最后一个字符的访问，如下所示：

let m='JavaScript';
console.log(m.at(-1));  // t

使用includes()、startsWith()和endsWith()字符串搜索方法

过去，开发者经常使用 indexOf() 方法在字符串对象中搜索字符串片段。他们使用 Regex 或基于 indexOf()/substring() 的解决方案来检查特定字符串的开始和结束。ES6 版本为这些需求引入了单独的内置字符串方法。

includes() 方法检查字符串中是否存在特定字符集：

let m='JavaScript';
console.log(m.includes('Java'));  // true

startsWith() 方法检查字符串的开头，如下代码片段所示：

let filename='_testmatrix.json';
console.log(filename.startsWith('_'));  // true

同时，endsWith() 方法检查字符串的结尾，如下所示：

let filename='_testmatrix.json';
console.log(filename.endsWith('.json'));  // true

这些内置字符串方法让我们可以编写简单的语句来满足常规的字符串搜索需求，而无需使用基于正则表达式或其他算法的解决方案。

使用repeat()方法进行字符串重复

在通用编程语言中构建字符串时，我们经常需要进行字符串重复。假设需要使用 ASCII 字符在终端上创建一条水平线。Python 允许开发者使用 * 操作符高效地处理这个问题，如下代码片段所示：

print('+-' * 10)  # +-+-+-+-+-+-+-+-+-+-

在 ES6 之前，JavaScript 开发者不得不使用一些技巧在不使用循环结构的情况下重复字符串。大多数开发者使用以下方法：

console.log(new Array(11).join('+-'));  // +-+-+-+-+-+-+-+-+-+-

ES6 引入了 repeat() 字符串方法，以高效地替代旧的非自解释代码进行字符串重复：

console.log('+-'.repeat(10));

使用字符串修剪方法删除多余的空白

在各种开发场景中，我们经常需要通过删除空白字符来预处理字符串。例如，您可能需要删除使用 <textarea> HTML 元素捕获的用户输入中的空白。过去，大多数开发者使用正则表达式来清理字符串，如下所示：

function trim(str) {
  return str.replace(/^\s+|\s+$/g, '');
}

console.log(trim('  Hello JavaScript    '));  // 'Hello JavaScript'

上述 trim() 函数删除了前导和尾随的空白字符。

JavaScript 在 String 对象上实现了 trim()、trimStart() 和 trimEnd() 方法，用于处理空白删除。trim() 方法删除前导和尾随的空白字符。同时，其他两个方法帮助我们有选择地清理前导和尾随空白，如下代码片段所示：

let txt='  Hello JavaScript \n ';

console.log(txt.trimStart());  // 'Hello JavaScript \n '
console.log(txt.trimEnd());    // '  Hello JavaScript'
console.log(txt.trim());       // 'Hello JavaScript'

使用 String.raw() 静态方法创建原始字符串

JavaScript 提供了模板字符串特性，以高效地生成包含各种表达式的动态字符串。此特性消除了使用 ${} 语法进行字符串拼接的需求。JavaScript 允许你使用标记函数实现自定义模板字面量处理器。

看以下示例代码片段：

function secret(strings, ...exps) { 
  return strings.reduce((acc, str, i)=> 
    (acc + str + (exps.length > i ? '*'.repeat(exps[i].toString().length) : '')), '');
}

let txt=secret`My username is ${'Bingo'}, and my password is ${1234}`;

console.log(txt);  // My username is *****, and my password is ****

上述 secret() 标记函数为模板字符串表达式中的所有值添加星号字符。正如你已经注意到的，我们可以通过在特定模板字符串前使用标记函数，而不是使用传统的括号式函数调用语法来执行标记函数。

内置的 String.raw() 标记函数允许我们存储不处理转义字符的原始字符串。假设需要使用 JavaScript 存储以下 Windows 文件路径：

C:\Projects\MyProject1\myproject.config.json

我们不能正确地在 JavaScript 中存储此字符串，因为它的转义字符被处理并删除了多个字符：

let path='C:\Projects\MyProject1\myproject.config.json';
console.log(path);  // C:ProjectsMyProject1myproject.config.json

在这里，我们可以使用 String.raw() 标记函数来防止转义字符处理：

let path=String.raw`C:\Projects\MyProject1\myproject.config.json`;
console.log(path);  // C:\Projects\MyProject1\myproject.config.json

String.raw 标记函数自动为转义字符添加双反斜杠，以正确存储原始字符串。此标记函数还适用于存储包含字符串中反斜杠的正则表达式定义：

let regex=String.raw`\s*${10}\s*`;
console.log('2   10  20'.replace(new RegExp(regex), ''));  // 220

在上面的示例中，我们在字符串中存储了动态构建的正则表达式定义，而无需使用双反斜杠。

使用 padStart() 和 padEnd() 方法填充字符串

在构建 Web 应用程序时，填充字符串是一个常见需求。我们经常需要为字符串应用填充字符，以获得固定的字符串长度。假设有一个从 0 开始并以 10 结束的数字列表，并在表格列中显示。我们可以使用前导零填充这一场景，通过一个共享的实用函数来提高表格的视觉效果，如下所示：

function format(num) {
  return num.toString().padStart(2, '0');
}

let arr=new Array(11).fill().map((e, i)=> i);

document.write(`<table>
  <tr>
    <th>#</th>
  </tr>
`);
for(let n of arr) {
  document.write(`<tr>
      <td>${format(n)}</td>
    </tr>`);
}
document.write('</table>');

在这里，我们使用内置的 padStart() 方法添加前导零填充，而不是编写自己的字符串填充算法。上述代码片段渲染了零填充的数字，如下所示：

ECMAScript 标准还引入了 padEnd() 方法，用于在特定字符串末尾添加填充字符，具体如下：

let token='TK023550L';
let displayToken=token.substring(0, 5).padEnd(token.length, '*');
console.log(`Token: ${displayToken}`);    // Token: TK023****

使用 replaceAll() 和 matchAll() 方法进行高效字符串处理

在 ES2021 之前，开发者不得不使用正则表达式来替换所有出现的特定字符串片段，因为 replace() 函数只替换第一次出现：

let msg='Hello JavaScript, Hello JavaScript';

console.log(msg.replace('JavaScript', 'Js'));  // Hello Js, Hello JavaScript
console.log(msg.replace(/JavaScript/g, 'Js')); // Hello Js, Hello Js

ES2021 引入了 replaceAll() 字符串方法，以替换所有出现的特定字符串片段：

console.log(msg.replaceAll('JavaScript', 'Js'));  // Hello Js, Hello Js

同时，ES2020 版本引入的 matchAll() 方法帮助我们使用可迭代协议遍历正则表达式匹配。此方法帮助我们避免使用 while 循环和 Regex.exec() 的传统正则表达式结果迭代方法（请参阅此解释）。

看以下代码片段：

let msg='AT01 BT023 AB02 AT224';
let matches=msg.matchAll(/\b(([A-Z]{2})([0-9]{2}))\b/g);  

for(let match of matches) {
  console.log(`${match[2]}-${match[3]}`);  // AT-01, AB-02
}

上述代码片段使用 matchAll() 方法遍历所有捕获组。

HTML（HyperText Markup Language，中文：超文本标记语言）是一种用于创建网页结构和内容的标记语言。它由一系列标签组成，这些标签描述了网页中的各个元素和其它相关信息。通过使用HTML标签和属性，开发人员可以定义文本、图像、链接、表格、表单等元素，并控制它们的外观和行为。本文主要介绍HTML的基本概念、历史背景和用途。

参考文档：https://www.cjavapy.com/article/3297/

HTML实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CJAVAPY编程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

HTML文档的后缀名可以是.html或.htm，都可以使用，没有区别。

注意：对于中文网页需要使用<meta charset="utf-8"> 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为<meta charset="gbk"> 。

1、HTML的基本概念

1）标签（Tag）

HTML使用标签来定义网页中的各个元素。标签通常以尖括号< >的形式出现，如<p>表示段落，<img>表示图像等。标签可以包含属性，用于提供额外的信息或控制元素的行为。

2）元素（Element）

一个完整的HTML元素由开始标签、内容和结束标签组成。例如，<p>这是一个段落</p>就是一个完整的段落元素。

3）属性（Attribute）

HTML标签可以具有属性，用于提供元素的额外信息或控制元素的行为。属性以键值对的形式出现，例如<img src="image.jpg">中的src属性指定了图像的源文件。

4）文档结构

一个HTML文档由<html>、<head>和<body>等标签组成。其中，<html>标签用于定义整个HTML文档的根元素，<head>标签用于定义文档的头部信息，如标题和样式表链接，<body>标签用于定义文档的主体内容。

5）块级元素和内联元素

HTML元素可以被分类为块级元素和内联元素。块级元素以块的形式显示，独占一行或一块空间，如<p>、<div>等。内联元素以行内的方式显示，不会独占一行，如<span>、<a>等。

6）嵌套

HTML元素可以嵌套在其他元素内部，形成一个层次结构。例如，<div>元素可以包含<p>元素，<p>元素可以包含<span>元素。

7）<!DOCTYPE> 声明

HTML文档的开头通常会包含一个DOCTYPE声明，用于指定文档的HTML版本。

例如：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

2、HTML与Web 浏览器

HTML（HyperText Markup Language）是一种用于创建网页结构和内容的标记语言，而Web浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于显示和解释HTML文档的应用程序。Web浏览器通过解析HTML文档，将其转换为可视化的网页。浏览器会读取HTML文档中的标签和内容，并根据这些标签和内容的定义，渲染出网页的结构和样式。HTML提供了各种标签和属性，用于定义文本、图像、链接、表格、表单等在网页中的展示和交互方式。浏览器在解析HTML时，会根据标签和属性的定义，将文本显示为段落、标题或其他格式，显示图像、链接，并响应用户的交互操作。

通过HTML和Web浏览器的结合，用户可以在浏览器中访问和浏览各种网页内容，包括网页文本、图像、视频、音频等多媒体元素，并与网页进行交互，如点击链接、填写表单、提交数据等。

大部分浏览器中，直接输出中文会出现中文乱码的情况，需要在头部将字符声明为 UTF-8 或 GBK。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
页面标题</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

3、HTML版本及历史背景

HTML有多个版本，每个版本都有不同的特性和改进。

版本	发布时间
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2014

1）HTML 1.0

HTML 1.0是最早的HTML版本，于1993年发布。它只包含一些基本的标签和属性，用于创建简单的文本和链接。HTML 1.0的目标是定义一种通用的超文本标记语言。

2）HTML 2.0

HTML 2.0于1995年发布，是对HTML 1.0的改进和扩展。它引入了一些新的标签和属性，如图像标签和表格标签，以支持更丰富的内容展示。

3）HTML 3.2

HTML 3.2于1997年发布，是对HTML 2.0的进一步改进。它引入了一些新的标签和属性，如表单标签和框架标签，以支持交互性和页面布局。

4）HTML 4.01

HTML 4.01于1999年发布，是对HTML 3.2的修订和扩展。它引入了更多的标签和属性，如层标签和样式表，以支持更灵活的页面设计和样式控制。

5）XHTML 1.0

XHTML（eXtensible HyperText Markup Language）是基于XML的HTML版本。XHTML 1.0于2000年发布，它严格遵循XML的语法规则，要求所有标签和属性都要正确嵌套和闭合。

6）HTML5

HTML5是HTML的最新版本，于2014年正式发布。HTML5引入了许多新的特性和API，如语义化标签、多媒体支持、Canvas绘图、本地存储等。HTML5还支持响应式设计，以适应不同设备和屏幕尺寸。

4、HTML用途

HTML是构建网页结构和内容的基础语言，它提供了丰富的标签和属性，使得开发者可以创建各种类型的网页，并实现不同的功能和效果。HTML用于定义网页的整体结构，包括标题、段落、列表、标题、导航菜单等元素。通过使用不同的HTML标签和属性，可以将文本、图像、音频、视频等内容组织起来，并构建页面的层次结构。HTML可以用于展示文本内容和多媒体元素，如图像、音频和视频。通过使用适当的HTML标签和属性，可以插入和显示各种类型的媒体内容，从而使网页更加丰富和吸引人。HTML提供了创建表单的标签和元素，可以用于收集用户的输入数据。通过使用表单元素如文本框、复选框、单选按钮和下拉列表等，用户可以输入数据并提交给服务器进行处理。

参考文档：https://www.cjavapy.com/article/3297/

天给大家推荐一款非常值得一用的开源矢量图标库CssGG。

css.gg 又一款供设计和前端开发的工具图标库，star高达6.5K+。拥有超过700+个矢量图标，可被用于.css|.svg|.tsx|.fig|.xd|.json|.xml等多种格式。

作为前端开发，平时需要使用图标都会去阿里iconfont图标库查找。

今天就多了一种新的选择css.gg。只要是优秀的，我们就有理由去使用它。

安装

$ npm i css.gg -S

包含以下目录及文件。

快速使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- You can add this link or any other CDN alternatives as mentioned above -->
    <link href='https://css.gg/css' rel='stylesheet'>

</head>
<body>

    <!-- Using i tag  -->
    <i class="gg- {ICONNAME} "></i>

    <!-- Using div tag  -->
    <div class="gg- {ICONNAME} "></div>

    <!-- Using custom tag  -->
    <gg-icon class="gg- {ICONNAME} "></gg-icon>

</body>
</html>

另外还可 CSS @import引入，SVG、JSON、XML、React等其它方式。

纯CSS、SVG、Figma UI Icons 可用在 SVG雪碧图，styled-components等。

so perfect，非常不错的一款开源图标库。

# 官网地址
https://css.gg/

# 仓库地址
https://github.com/astrit/css.gg

ok，今天就介绍到这里。如果小伙伴们有兴趣的话，可以去试一试哈！

在线咨询

上一篇：30款花店WEB网页设计灵感
下一篇：从前景、待遇、入门难度分析，Java和HTML5哪个

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商