5個(gè)你不知道的JavaScript字符串處理庫(kù)(小結(jié))
處理大小寫轉(zhuǎn)換,刪除字母符號(hào),Unicode處理,URL處理等。
使用字符串可能是一項(xiàng)繁瑣的任務(wù),因?yàn)橛性S多不同的用例。例如,將字符串轉(zhuǎn)換為駝峰大小寫這樣的簡(jiǎn)單任務(wù)可能需要幾行代碼才能達(dá)到最終目標(biāo)。
function camelize(str) {
return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function(match, index) {
if (+match === 0) return ""; // or if (/\s+/.test(match)) for white spaces
return index === 0 ? match.toLowerCase() : match.toUpperCase();
});
}
上面的代碼片段是 StackOverflow 中投票最多的答案。但這也沒有解決字符串為 ----Foo----bAr----- 的情況。

這是字符串處理庫(kù)可以拯救的地方,它們使實(shí)現(xiàn)復(fù)雜的字符串操作變得容易,并且可以考慮給定問題的所有可能用例。這對(duì)你有幫助,因?yàn)槟阒恍枰{(diào)用一個(gè)方法即可獲得有效的解決方案。
讓我們看一些JavaScript的字符串處理庫(kù)。
1. String.js
string.js,或者簡(jiǎn)稱為 S,是一個(gè)輕量級(jí)的JavaScript庫(kù)(壓縮后壓縮后小于5kb),用于瀏覽器或提供額外String方法的Node.js。
安裝
npm i string
值得注意的方法
between(left, right) ——提取左右串之間的字符串。嘗試在HTML中的兩個(gè)標(biāo)簽之間獲取元素時(shí)可以使用此方法。
var S = require('string');
S('<a>This is a link</a>').between('<a>', '</a>').s
// 'This is a link'
camelize() ——?jiǎng)h除所有下劃線或破折號(hào),并將字符串轉(zhuǎn)換成駝峰式大寫字母。此功能可用于解決本文開頭提到的問題。
var S = require('string');
S('---Foo---bAr---').camelize().s;
//'fooBar'
humanize() ——將輸入轉(zhuǎn)換為人性化的形式。這個(gè)功能從頭開始實(shí)現(xiàn),肯定需要相當(dāng)多的代碼。
var S = require('string');
S(' capitalize dash-CamelCase_underscore trim ').humanize().s
//'Capitalize dash camel case underscore trim'
stripPunctuation() ——去掉給定字符串中的所有標(biāo)點(diǎn)符號(hào)。如果你從頭開始實(shí)現(xiàn)此功能,則很有可能會(huì)錯(cuò)過標(biāo)點(diǎn)符號(hào)。
var S = require('string');
S('My, st[ring] *full* of %punct)').stripPunctuation().s;
//My string full of punct
你可以在此處查看更多方法。
2. Voca

Voca是一個(gè)用于處理字符串的JavaScript庫(kù)。Voca庫(kù)提供有用的函數(shù)來使字符串操作變得輕松自如:更改大小寫,修飾,填充,彈化,拉丁化,sprintfy,截?cái)?,轉(zhuǎn)義等等。模塊化設(shè)計(jì)允許加載整個(gè)庫(kù)或單個(gè)函數(shù)以最小化應(yīng)用程序構(gòu)建。該庫(kù)已經(jīng)過全面測(cè)試,有據(jù)可查,并得到長(zhǎng)期支持。
安裝
npm i voca
值得注意的方法
Camel Case(String data)——將數(shù)據(jù)轉(zhuǎn)換為駝峰格式。
var v = require('voca');
v.camelCase('foo Bar');
// => 'fooBar'
v.camelCase('FooBar');
// => 'fooBar'
v.camelCase('---Foo---bAr---');
// => 'fooBar'
Latinise(String data)——通過刪除變音符號(hào)來對(duì)數(shù)據(jù)進(jìn)行拉丁化處理。
var v = require('voca');
v.latinise('cafe\u0301'); // or 'café'
// => 'cafe'
v.latinise('août décembre');
// => 'aout decembre'
v.latinise('как прекрасен этот мир');
// => 'kak prekrasen etot mir'
isAlphaDigit(String data)——檢查數(shù)據(jù)是否僅包含字母和數(shù)字字符。 (字母數(shù)字)
var v = require('voca');
v.isAlphaDigit('year2020');
// => true
v.isAlphaDigit('1448');
// => true
v.isAlphaDigit('40-20');
// => false
CountWords(String data)——計(jì)算數(shù)據(jù)中的單詞數(shù)。
var v = require('voca');
v.countWords('gravity can cross dimensions');
// => 4
v.countWords('GravityCanCrossDimensions');
// => 4
v.countWords('Gravity - can cross dimensions!');
// => 4
EscapeRegExp(String data)——轉(zhuǎn)義在數(shù)據(jù)中的正則表達(dá)式特殊字符 -[] / {}()* +? 。 \ ^ $ | 。
var v = require('voca');
v.escapeRegExp('(hours)[minutes]{seconds}');
// => '\(hours\)\[minutes\]\{seconds\}'
你可以在此處查看更多信息。
3. Anchorme.js

這是一個(gè)微型快速Javascript庫(kù),可幫助檢測(cè)文本中的鏈接/ URL /電子郵件,并將其轉(zhuǎn)換為可單擊的HTML錨鏈接。
- 它的靈敏度高,誤報(bào)率最低。
- 它根據(jù)完整的IANA列表驗(yàn)證URL和電子郵件。
- 驗(yàn)證端口號(hào)(如果有)。
- 驗(yàn)證IP八位字節(jié)號(hào)(如果存在)。
- 適用于非拉丁字母URL。
安裝
npm i anchorme
使用
import anchorme from "anchorme";
// 或者
// var anchorme = require("anchorme").default;
const input = "some text with a link.com";
const resultA = anchorme(input);
//some text with a <a rel="external nofollow" >link.com</a>
你可以傳入額外的擴(kuò)展來進(jìn)一步定制功能。
你可以在此處查看更多信息。
4. Underscore.string

Underscore.string 是JavaScript的字符串操作擴(kuò)展,可以與或不與Underscore.js一起使用。Underscore.string是一個(gè)JavaScript庫(kù),用于舒適地處理字符串,它是Prototype.js,Right.js和Underscore啟發(fā)的Underscore.js擴(kuò)展。
Underscore.string為你提供了幾個(gè)有用的功能:大寫、清除、包括、計(jì)數(shù)、escapeHTML、unescapeHTML、插入,拼接、startsWith、endsWith、標(biāo)題化、修剪、截?cái)嗟取?br />
安裝
npm install underscore.string
值得注意的方法
numberFormat(number)——格式化數(shù)字。將數(shù)字格式化為帶小數(shù)點(diǎn)和順序分隔的字符串。
var _ = require("underscore.string");
_.numberFormat(1000, 3)
=> "1,000.000"
_.numberFormat(123456789.123, 5, '.', ',');
=> "123,456,789.12300"
chop(string, step)——將給定的字符串切成小塊。
var _ = require("underscore.string");
_.chop('whitespace', 3);
=> ['whi','tes','pac','e']
你可以在此處查看更多信息。
5. Stringz
該庫(kù)的主要亮點(diǎn)是它支持unicode。如果運(yùn)行以下代碼,則輸出為2。
"🤔".length // -> 2
這是因?yàn)?String.length() 返回字符串中的代碼單元數(shù),而不是字符數(shù)。
你可以在此處閱讀有關(guān)JavaScript unicode問題的更多信息。
安裝
npm install stringz
值得注意的方法
limit(string, limit, padString, padPosition)——將字符串限制為給定的寬度。
const stringz = require('stringz');
// Truncate:
stringz.limit('Life's like a box of chocolates.', 20);
// "Life's like a box of"
// Pad:
stringz.limit('Everybody loves emojis!', 26, '💩');
// "Everybody loves emojis!💩💩💩"
stringz.limit('What are you looking at?', 30, '+', 'left');
// "++++++What are you looking at?"
// Unicode Aware:
stringz.limit('🤔🤔🤔', 2);
// "🤔🤔"
stringz.limit('👍🏽👍🏽', 4, '👍🏽');
// "👍🏽👍🏽👍🏽👍🏽"
toArray(string)——將字符串轉(zhuǎn)換為數(shù)組。
const stringz = require('stringz');
stringz.toArray('abc');
// ['a','b','c']
//Unicode aware
stringz.toArray('👍🏽🍆🌮');
// ['👍🏽', '🍆', '🌮']
要了解有關(guān)Stringz的更多信息,請(qǐng)?jiān)?a target="_blank" rel="external nofollow" >此處訪問其Github。
來源:blog.bitsrc.io,作者:Mahdhi Rezvi,翻譯:前端外文精選
到此這篇關(guān)于5個(gè)你不知道的JavaScript字符串處理庫(kù)(小結(jié))的文章就介紹到這了,更多相關(guān)JavaScript字符串處理庫(kù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
echarts橫向柱狀圖簡(jiǎn)單實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于echarts橫向柱狀圖簡(jiǎn)單實(shí)現(xiàn)的相關(guān)資料,ECharts是百度前端開發(fā)部開發(fā)的一個(gè)開源可視化庫(kù),它可以幫助開發(fā)者輕松的實(shí)現(xiàn)各種數(shù)據(jù)可視化,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
JS實(shí)現(xiàn)兼容性較好的隨屏滾動(dòng)效果
這篇文章主要介紹了JS實(shí)現(xiàn)兼容性較好的隨屏滾動(dòng)效果,演示了固定位置顯示和隨屏滾動(dòng)兩種效果的實(shí)現(xiàn)方法,涉及css樣式的設(shè)置與結(jié)合時(shí)間函數(shù)遞歸調(diào)用實(shí)現(xiàn)滾屏的技巧,需要的朋友可以參考下2015-11-11
JavaScript編程中容易出BUG的幾點(diǎn)小知識(shí)
這篇文章主要介紹了JavaScript編程中容易出BUG的幾點(diǎn)小知識(shí),本文總結(jié)了8條小知識(shí),這些小知識(shí)如果弄不明白,會(huì)在編程中給你惹麻煩出BUG,需要的朋友可以參考下2015-01-01
Firefox下設(shè)為主頁(yè)的JavaScript代碼
在IE下,我們可以輕松使用以下代碼來實(shí)現(xiàn)設(shè)置主頁(yè) 但在firefox我們需要做的更多2008-09-09
一些在TypeScript上費(fèi)過時(shí)間的地方總結(jié)
這篇文章主要給大家介紹了關(guān)于一些在ts上費(fèi)過時(shí)間的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-11-11
JS特權(quán)方法定義作用以及與公有方法的區(qū)別
在構(gòu)造函數(shù)內(nèi)部通過this關(guān)鍵字定義的的方法為特權(quán)方法它的作用為在構(gòu)造函數(shù)外面公開訪問(僅限于實(shí)例化的對(duì)象),而且還能夠訪問私有成員和方法,感興趣的你可以參考下哈2013-03-03
layer子層給父層頁(yè)面元素賦值,以達(dá)到向父層頁(yè)面?zhèn)髦档男Ч麑?shí)例
下面小編就為大家?guī)硪黄猯ayer子層給父層頁(yè)面元素賦值,以達(dá)到向父層頁(yè)面?zhèn)髦档男Ч麑?shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
JS中產(chǎn)生標(biāo)識(shí)符方式的演變
本文記錄下JS中產(chǎn)生標(biāo)識(shí)符方式的演變,從ES5到ES6,ES5及其之前是一種方式,只包含兩種聲明(var/function),ES6則增加了一些產(chǎn)生標(biāo)識(shí)符的關(guān)鍵字,如 let、const、class。2015-06-06

