全文共2491字，預計學習時長8分鐘

檢測瀏覽器、檢測函數類型、轉換hyphen-case為camelCase、刪除字符串中的HTML標籤、以及反轉字符串等。

今天，小芯會給大家分享7個有助於提升效率的JavaScript Utility函數，覺得有用的話，就趕緊收藏分享吧~

檢測瀏覽器

不同的瀏覽器有不同的navigator.useragent，可通過檢查其值來檢測瀏覽器類型。

例如：

此輸出結果中有一個「chrome」字符串。

此輸出結果中有一個「firefox」字符串。

所以只需要檢查navigator.useragent中是否有瀏覽器品牌名，就可以檢測瀏覽器類型。

const inBrowser =typeof window !== 'undefined'
// get user agent
constUA= inBrowser && window.navigator.userAgent.toLowerCase()
// detect browser
const isIE =UA&&/msie|trident/.test(UA)
const isIE9 =UA&&UA.indexOf('msie 9.0') >0
const isEdge =UA&&UA.indexOf('edge/') >0
const isChrome =UA&&/chrome\\/\\d+/.test(UA) && !isEdge
const isPhantomJS =UA&&/phantomjs/.test(UA)
const isFF =UA&&UA.match(/firefox\\/(\\d+)/)
// detect OS
const isAndroid =UA&&UA.indexOf('android') >0
const isIOS =UA&&/iphone|ipad|ipod|ios/.test(UA)

檢測函數類型

函數類型有兩種：

· 運行時環境提供的本機函數。例如 Array.isArray、console.log。

· 由用戶編寫的函數

在一些複雜案例中，可能需要對這兩種類型函數進行區分。

那麼如何在代碼中區分這兩種類型的函數呢? 很簡單，它們在轉換為字符串時會輸出不同的結果。

當本機函數被轉換為字符串時，輸出結果總是包含native code。

由此可以寫出如下函數：

functionisNative (func){
    returntypeof func ==='function'&&/native code/.test(func.toString())
}

轉換hyphen-case為camelCase

將hello-world字符串樣式轉換成helloWorld字符串樣式是一個非常常見的需求。為此，可以使用正則表達式。

可以使用/-(\\w)/g來匹配所有在–後面的小寫字母，然後使用大寫字母對它們進行替換。

functioncamelize(str) {
    const camelizeRE =/-(\\w)/g;
    return str.replace(camelizeRE,  (_, c) => c ? c.toUpperCase() : '');
}

刪除字符串中的HTML標籤

出於安全考慮，經常需要從字符串中刪除HTML標籤。使用一個簡單的正則表達式就能輕鬆完成這項任務。

conststripHTMLTags = str => str.replace(/<[^>]*>/g, '');

反轉字符串

反轉字符串是一個很常見的需求。為此，可以將一個字符串拆分為一個數組，然後反轉該數組並將其連接。

conststripHTMLTags = str => str.replace(/<[^>]*>/g, '');

用逗號將數字格式化為字符串

為了使一個較大的數更易於閱讀，經常會在數字中間加一些分隔符。

· 111111 => 111,111

· 123456789 => 123,456,789

通常每隔三個數字添加一個逗號。

functionnumberToStringWithComma(number) {
    // convert number to string
    let str =String(number);
    let s ='';
    let count =0;
    for (let i = str.length-1; i >= 0; i--) {
      s = str[i] + s
      count++
      // add a comma to every three numbers
      if (count % 3==0&& i != 0) {
        s =','+ s
      }
    }
    return s
}

轉換位元組單位為合理單位

在計算機中，文件的大小通常以位元組為單位。但如果它是一個很大的數字，對人類來說則是不可讀的。

例如，第一次看到98223445B這個數字時，人們很難有任何直觀的感覺。但是如果使用93.7MB，就會對它非常熟悉。所以需要寫一個便於閱讀偏大數字的函數。

functionbytesToSize (bytes) {
    if (bytes ===0) return'0 B';
    var k =1024;
    var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
    var i =Math.floor(Math.log(bytes) / Math.log(k))
    return (bytes / Math.pow(k, i)).toPrecision(3) +' '+ sizes[i]
}

感謝閱讀，希望能對你有所幫助~

留言點贊關注

我們一起分享AI學習與發展的乾貨

如轉載，請後台留言，遵守轉載規範