10個很棒的 JavaScript 字符串技巧

2021-01-09 尚學堂前端學院

最近開源了一個 Vue 組件,還不夠完善,歡迎大家來一起完善它,也希望大家能給個 star 支持一下,謝謝各位了。

我們稱一個字符序列為字符串。這幾乎是所有程式語言中都有的基本類型之一。這裡跟大家展示關於 JS 字符串的10個很棒的技巧,你可能還不知道哦?

1.如何多次複製一個字符串

JS 字符串允許簡單的重複,與純手工複製字符串不同,我們可以使用字符串的repeat方法。

2. 如何填充一個字符串到指定的長度

有時,我們希望字符串具有特定長度。 如果字符串太短,則需要填充剩餘空間,直到達到指定的長度為止。

過去,主要還是使用庫 left-pad。 但是,今天我們可以使用padStart和SpadEnd方法,選擇哪種方法取決於是在字符串的開頭還是結尾填充字符串。

3.如何將字符串拆分為字符數組

有多種方法可以將字符串分割成字符數組,我更喜歡使用擴展操作符(...):

注意,這並不總是像預期的那樣工作。有關更多信息,請參見下一個技巧。

4.如何計算字符串中的字符

可以使用length屬性。

但對於中文來說,這個方法就不太靠譜。

日本漢字鴿返回length為2,為什麼? JS 將大多數字符表示為16位代碼點。 但是,某些字符表示為兩個(或更多)16 位代碼點,稱為代理對。 如果使用的是length屬性,JS 告訴你使用了多少代碼點。 因此,鴿(hokke)由兩個代碼點組成,返回錯誤的值。

那怎麼去判斷呢,使用解構操作符號(...)

這種方法在大多數情況下都有效,但是有一些極端情況。 例如,如果使用表情符號,則有時此長度也是錯誤的。 如果真想計算字符正確長度,則必須將單詞分解為 字素簇(Grapheme Clusters) ,這超出了本文的範圍,這裡就不在這說明。

5.如何反轉字符串中的字符

反轉字符串中的字符是很容易的。只需組合擴展操作符(...)、Array.reverse方法和Array.join方法。

和前面一樣,也有一些邊緣情況。遇到邊緣的情況就有需要首先將單詞拆分為字素簇。

6. 如何將字符串中的第一個字母大寫

一個非常常見的操作是將字符串的第一個字母大寫。雖然許多程式語言都有一種本地方法來實現這一點,但 JS 需要做一些工作。

另一種方法:

7.如何在多個分隔符上分割字符串

假設我們要在分隔符上分割字符串,第一想到的就是使用split方法,這點,智米們肯定知道。 但是,有一點大家可能不知道,就是split可以同時拆分多個分隔符, 使用正則表達式就可以實現:

8.如何檢查字符串是否包含特定序列

字符串搜索是一項常見的任務。 在 JS 中,你可以使用String.includes方法輕鬆完成此操作。 不需要正則表達式。

9.如何檢查字符串是否以特定序列開頭或結尾

在字符串的開頭或結尾進行搜索,可以使用String.startsWith和String.endsWith方法。

10.如何替換所有出現的字符串

有多種方法可以替換所有出現的字符串。 可以使用String.replace方法和帶有全局標誌的正則表達式。 或者,可以使用新的String.replaceAll方法。 請注意,並非在所有瀏覽器和Node.js 版本中都可用此新方法。

總結

字符串是幾乎所有程式語言中最基本的數據類型之一。同時,它也是新開發人員學習的最早的數據類型之一。然而,尤其是在JavaScript中,許多開發人員並不知道關於字符串的一些有趣的細節。希望此文對你有所幫助。

我是小智,我們下期見。

作者:前端小智 來源:掘金 著作權歸作者所有。商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。

相關焦點

  • 20個常用的JavaScript簡寫技巧
    任何程式語言的簡寫技巧都能夠幫助你編寫更簡練的代碼,讓你用更少的代碼實現你的目標。讓我們一個個來看看 JavaScript 的簡寫技巧吧。 1. 聲明變量 2.
  • javascript中那些奇怪的特性
    模板字符串帶標籤的模板字符串能讓你更好地控制從模板解析成字符串的過程,它比普通的模板字符串只是多了一個自定義的標籤。這個標籤代表著一個解析函數,它會得到從模板字符串解析出來的字符串和值列表,通過邏輯處理返回最終的生成的字符串。
  • 9 個極其強大的 JavaScript 技巧
    每一段代碼都有進一步優化的空間,每一個操作都有更便捷的技巧。 下面列舉一些非常強大的 JavaScript hack 技巧。 1. Replace All 我們知道 string.Replace() 函數只會替換第一個項目。
  • 漫畫:什麼是字符串匹配算法?
    上圖的情況,在每一輪進行字符匹配時,模式串的前三個字符a都和主串中的字符相匹配,一直檢查到模式串最後一個字符b,才發現不匹配:這樣一來,兩個字符串在每一輪都需要白白比較4次,顯然非常浪費。給定主串和模式串如下(假定字符串只包含26個小寫字母):第一步,我們需要生成模式串的hashcode。
  • 9個極其強大的JavaScript技巧
    1.將數字轉換為字符串我們只需使用帶空引號的串聯運算符即可。將字符串轉換為數字用 + 運算符即可。請注意這裡的用法,因為它只適用於「字符串數字」。短路條件舉個例子:if (available) {     addToCart(); } 只需使用變量和函數就能縮短它:
  • vxworks中常用的字符串、buffer處理相關函數
    fioRdString - 從文件讀取一行數據到字符串sscanf - 從字符串中解析格式數據fdprintf -sprintf -vprintf -vfdprintf -vsprintf -b) string.hmemchr - 從一塊內存中搜索指定字符memcmp
  • JavaScript速記技巧:向著更清晰的代碼邁進
    下面是一些JavaScript的速記技巧。6.交換兩個變量通常交換兩個變量需要藉助第三個變量。然而通過數組析構賦值,可以輕鬆交換兩個變量。有內置的方法,如parseInt 和parseFloat ,可用於將字符串轉換為數字。
  • Excel VBA 判斷單元格值是什麼數據類型:字符串、數字、日期?
    Excel VBA 判斷單元格輸入的值為什麼數據類型:字符串、數字、日期?Private Sub Worksheet_SelectionChange(ByVal Target As Range)If TypeName(Target.Value) = "String" ThenMsgBox "該單元格的值是字符串類型"
  • 什麼是JavaScript對象?如何創建並引用?這就告訴你!
    因為對象能幫我們解決一些複雜的問題一、對象概述在JavaScript 中的所有事物都是對象:字符串(new String)、布爾(new Boolean())、數值(Number)、數組(Array)、函數(Function)等。
  • Python3.9官方文檔翻譯版python簡介之字符串
    因為轉義符號的原因,有時同輸入字符串相比是不同,但其實他們是相同的。法國字符串包含單引號並且沒有雙引號的號的話引用標註是使用雙引號,否則使用單引號。通過省略標註引號並且列印轉義和特殊字符串的方式,列印功能可以提供易讀性更強的輸出。
  • 4個代碼中,字符串的出現頻率,我們比一比
    在程式設計師的代碼裡,字符串是經常出現的形式。有些語句雖然沒有什麼意義,但卻無孔不入,我們經常見到它的身影。這個短短的句子剛巧包含了從A到Z 全部26個字母。解釋是這樣解釋的,但是不知道特殊字符是如何測試的。其實,下面這段英文,也是同樣的功效,而且更短。The five boxing wizards jump quickly。沒錯,它一度時間是我的個人密碼。大中華的文字,卻無法這麼玩,因為方塊字實在是太多了。
  • Mysql性能優化:如何給字符串加索引?
    比如我們給User表中的郵箱添加前綴索引,如下: alter table user add index index1(email(7));上述語句將email的前7個字符作為索引。前綴索引和普通索引比較我們分別將email的全部作為索引和前7個字符作為索引來看看在性能上有什麼差異。
  • 如何使用JavaScript實現前端導入和導出excel文件
    由於我們採用antd的table組件來渲染數據, 所以我們需要手動將解析出來的數據轉換成table支持的數據格式.大致流程如下: 所以我們需要做的就是將Upload得到的文件數據傳給xlsx, 由xlsx生成解析對象, 最後我們利用javascript算法將xlsx的對象處理成ant-table支持的數據格式即可.
  • JavaScript-window對象常用屬性及方法有哪些?
    (3)location 對象,瀏覽器當前URL信息;(4)navigator 對象,瀏覽器本身信息;(5)screen 對象,客戶端屏幕信息;(6)history 對象,瀏覽器訪問歷史信息;在瀏覽器中,window對象有雙重角色,它既是通過javascript
  • 10個很棒的YouTube優化技巧
    毫無疑問,YouTube廣告互惠互贏的特徵已經讓消費者和廣告主雙雙沉迷其中,接下來,我們將詳細介紹一下利用YouTube投放時提高視頻排名的技巧。事實上,YouTube在系統數據進程抓取和處理方面不如Google的算法和代碼先進,但是YouTube確實提供了一些視頻類平臺獨有的廣告形式來促進你的業務增長並提高你的網絡排名。
  • 第五篇:JavaScript事件處理
    <head><title>JavaScript開發案例</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript
  • QQ幸運字符怎麼抽機率高 QQ幸運字符抽卡技巧Pick起來
    QQ幸運字符怎麼抽機率高 QQ幸運字符抽卡技巧Pick起來時間:2020-11-23 17:14   來源:遊俠網   責任編輯:沫朵 川北在線核心提示:原標題:QQ幸運字符怎麼抽機率高 QQ幸運字符抽卡技巧Pick起來 QQ幸運字符怎麼抽機率高?
  • 使用JavaScript對正則表達式進行解析
    讓我們看一個示例,該示例將驗證字符串是否包含單詞Hello。查找以下不是單詞字符或空格的任何字符的位置:String.prototype.replace():該replace()方法返回一個新字符串,字符串具有部分或全部模式匹配項,並由替換項替換。模式可以是字符串或RegExp,替換可以是字符串或每個匹配項要調用的函數。如果模式是字符串,則僅第一個匹配項將被替換。
  • 魔獸世界懷舊服wa插件字符串分享 WCL評分和伺服器排行查詢
    魔獸世界懷舊服wa插件字符串分享,使用本字符串後,當團隊有新團員時,自動通報其職業、伺服器排名、TAQ評分/排名、BWL評分/排名、MC評分/排名。需要的朋友快來分享吧。 ~ 然後,說本帖分享的WA字符串,提取了WclPlayerScore插件的TAQ/BWL/MC三個副本的評分和排名,以及本伺服器本天賦TAQ全明星積分排名數據(考慮一句話字數不要過長,只提取了本服排名數據,未提取國服總排名數據)。