10個很棒的 JavaScript 字符串技巧

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

最近開源了一個 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中,許多開發人員並不知道關於字符串的一些有趣的細節。希望此文對你有所幫助。

我是小智,我們下期見。

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

相關焦點

  • 在JavaScript字符串的search()方法中,如何匹配正則表達式?
    例如:var patt = /Yido/i,Yido是一個簡單的匹配模式,用於字符串的搜索。第二個/後面跟修飾符標誌。這裡的修飾符標誌是i,表示不分區大小寫進行匹配。第四節:search()方法的使用4.1. 基本含義search()方法是字符串對象的方法,可與正則表達式對接,用於將當前字符串在正則表達式中搜索並匹配。
  • JavaScript字符串-概念
    字符串的概念 概念: 在JavaScript中將所有單引號或雙引號括起來的都叫做字符串 字符串的屬性 1.length; 返回的是當前字符串中字符的個數 例如我們要輸出hello的個數:
  • JavaScript字符串 - 查找方法
    字符串查找的方法子字符串代表的就是要查找的字符串1.indexOf();格式:字符串.indexOf( 子字符串串,開始查找的位置 );返回值:如果在字符串中查找到了子字符串第一次出現的位置,返回子字符串出現的位置,否則沒有查找到返回 -
  • Excel小技巧|三種方法計算算式字符串
    Excel中針對一列算式字符串的問題,如果才能計算得出正確結果?如下圖所示,A列是一列算式字符串,如何計算其正確的結果,即如何在算式字符串前面加個"="並使之正常計算,這裡我們用三種方法處理,總有一種適合你哦!
  • 七天學會javascript第一天javascript介紹
    javascript介紹javascript數據類型javascript運算符javascript對象javascript Date對象javascript String對象JavaScript常用於實現一些前端效果。前些年流行的flash已經慢慢的被淘汰,js盛行起來。javascript :客戶端編程。javascript是由客戶端去解釋運行的。
  • 在JavaScript中,使用replace()、test()和exec()方法匹配字符串
    01第一節:replace()方法概述在#JavaScript#中,replace()方法可以在字符串中使用一個或多個字符替換為另外一個或多個字符,也可以替換為一個與正則表達式能夠匹配上的子字符串。;var res = str.replace(/Microsoft/i, "Google");document.write(res);</script>replace()方法的參數說明如下:第1個參數可以是查找的字符串,也可以是一個正則表達式,此例子中是一個正則表達式。第2個參數是最終要替換為的新字符串。
  • 漫畫:什麼是字符串匹配算法?
    上圖的情況,在每一輪進行字符匹配時,模式串的前三個字符a都和主串中的字符相匹配,一直檢查到模式串最後一個字符b,才發現不匹配:這樣一來,兩個字符串在每一輪都需要白白比較4次,顯然非常浪費。假設主串的長度是m,模式串的長度是n,那麼在這種極端情況下,BF算法的最壞時間複雜度是O(mn)。
  • 來一輪帶注釋的demo,徹底搞懂javascript中的replace函數
    javascript這門語言一直就像一位帶著面紗的美女,總是看不清,摸不透,一直專注伺服器端,也從來沒有特別重視過,直到最近幾年,javascript越來越重要,越來越通用。最近和前端走的比較近,藉此機會,好好鞏固一下相關知識點。
  • 幾個常用的Excel字符串函數,職場人精英必備,直接複製使用
    【用途】將兩個或多個文本字符串連接成一個字符串【實例】如下圖將B3、C3單元格文字合併到E3單元格中,在E3單元格中輸入公式:=CONCATENATE(B3,C3),演示如下圖:二、REPLACE函數【語法】REPLACE(old_text, start_num, num_chars, new_text)【用途】將特定位置的字符串替換為不同的文本字符【實例】把B11單元格中「帶給」替換為「分享」,在B13單元格中輸入公式:=REPLACE(B11,11,4,"分享"),演示如下圖:
  • MySQL字符串截取 和 截取字符進行查詢
    通過mysql自帶的一些字符串截取函數,對數據進行處理,下面是我整理的字符串截取 和 截取字符進行查詢。一、MySQL中字符串的截取MySQL中有專門的字符串截取函數:其中常用的有兩種:substring_index(str,delim,count) 和concat 1.substring_index(str,delim,count) 函數的使用較為普遍。
  • JavaScript入門教程
    起源javascript前身叫做livescript,sun公司推出java,netspace公司引進java的概念,重新設計livescript,並更名javascript。發明者,布蘭登.艾克,表單驗證原先要經過伺服器,伺服器壓力大,等待時間長,js僅在客戶端就可完成。是什麼是一種腳本語言,是一種輕量級的程式語言。
  • JavaScript中的「黑話」
    字符串與數字相加時會將數值默認轉為字符串,因此有了一下將數字轉為字符串的快捷方法:'' + 1。& 與 &&如何你是從類C語言過來的話,請拋棄之前的刻板印象:&可以充當邏輯操作符號。在JavaScript中,&只能進行位運算。&,它表示按位與,此運算符需要兩個數字並返回一個數字。
  • 深入剖析go中字符串的編碼問題——特殊字符的string怎麼轉byte?
    uint8範圍是0-255,只能夠表示有限個unicode字符,超過255的範圍就會編譯報錯。根據上述關於unicode的定義,4位元組的rune完全兼容兩字節的unicode。沒有經過字節級別的轉義,那麼字符串是一個標準的utf8序列。有了前面的基礎知識和字符串是一個標準的utf8序列這一結論後我們接下來對字符串「」(如果無法展示,記住該特殊字符的unicode是\u0081)手動編碼。
  • 什麼是javascript?javascript需要學哪些內容?這篇文章告訴你!
    剩餘可以是任意字母,美元符號,下劃線和數字(3)不能使用javascript中的關鍵字(保留字)來命名變量(4)中文也可以聲明變量,不建議使用它。),string(字符串)。5.1.2字符串類型(string)字符串:加單引號或者是雙引號字符串連接:使用的是+模板字符串:5.1.4 undefined
  • IE10 User-agent字符串曝光-微軟,Microsoft,IE10 ——快科技(驅動...
    除了​​一些令人興奮的新功能 (CSS3 FlexBox、Grid、Gradients、MultiCol),該平臺預​​覽版也包括新的IE10 User-Agent 識別字符串:Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1;
  • C語言編程技巧:跟我學如何定義及使用一個字符串數組
    實現目的我們在用C語言編寫程序時,經常會遇到使用字符串數組的情況,這種數組的特點是, 數組中的每個元素都是一個字符串,但每個字符串的長度卻不相同。如果你使用C++語言進行編程的話,實現起來相對比較簡單,只需直接選擇標準模板庫的字符串string類,在代碼中定義該類的一個數組即可實現。現在的問題是,在純C語言中如何定義這樣的一個字符串數組呢?如對於下面的一個字符串數組:str = {「I love C.」,「I love C++.」,「I love JAVA.」
  • Go語言學習筆記之字符串一
    \ fmt.Println("\nContains函數判斷字符串包含關係:") str4 := "Ajian loves python and goland" fmt.Println(str4) fmt.Println(strings.Contains(str4,"jian")) //Index 函數是返回某字符在字符串的下標,在字符串裡面返回下標,否則-1(註:返回的是首次出現的下標)
  • php刪除字符串兩邊的空白符:trim()、ltrim()、rtrim()
    $char_mask是一個可選的參數,當它被省略的時候,這3個函數都默認刪除以下這些空白符:" ",空格符(ASCII碼32);"\t",制表符(ASCII碼9);"\n",換行符(ASCII碼10);"\r",回車符(ASCII碼13);
  • pandas向量化字符串操作方法!
    作者:小伍哥 來源:AI入門學習python內置一系列強大的字符串處理方法,但這些方法只能處理單個字符串,處理一個序列的字符串時,需要用到循環。那麼,有沒有辦法,不用循環就能同時處理多個字符串呢,pandas的向量化操作就提供了這樣的方法。
  • Python中去除字符串首尾空格、特殊字符和指定子字符串的方法
    第七十七節:去除字符串中的空格和特殊字符字符串在實際應用中,有很多情況是默認去除字符串首尾的空格狀態,去除幾個比較特殊的字符的。這幾個特殊的字符是:換行符「\n」、回車符「\r」、制表符「\t」。;使用print()函數輸出字符串時,其中的特殊字符「\n、\r、\t」則被默認為命令執行了;使用strip()方法,只能去除字符串首尾的空格和特殊字符,存在於字符串中間的空格和特殊字符是無法去除的。