讓開發者生活更輕松的 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小時內與您取得聯系。

整合營銷服務商