7个有助于提升效率的JavaScript Utility函数

开发 前端
检测浏览器、检测函数类型、转换hyphen-case为camelCase、删除字符串中的HTML标签、以及反转字符串等。

检测浏览器、检测函数类型、转换hyphen-case为camelCase、删除字符串中的HTML标签、以及反转字符串等。

[[319489]]

今天,小芯会给大家分享7个有助于提升效率的JavaScript Utility函数,觉得有用的话,就赶紧收藏分享吧~

检测浏览器

不同的浏览器有不同的navigator.useragent,可通过检查其值来检测浏览器类型。

例如:

​7个有助于提升效率的JavaScript Utility函数

Mac OS上的Chrome

此输出结果中有一个“chrome”字符串。

​7个有助于提升效率的JavaScript Utility函数

Mac OS上的Firefox

此输出结果中有一个“firefox”字符串。

所以只需要检查navigator.useragent中是否有浏览器品牌名,就可以检测浏览器类型。

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

检测函数类型

函数类型有两种:

  • 运行时环境提供的本机函数。例如 Array.isArray、console.log。
  • 由用户编写的函数

在一些复杂案例中,可能需要对这两种类型函数进行区分。

那么如何在代码中区分这两种类型的函数呢? 很简单,它们在转换为字符串时会输出不同的结果。

​7个有助于提升效率的JavaScript Utility函数

本机函数

​7个有助于提升效率的JavaScript Utility函数

用户函数

当本机函数被转换为字符串时,输出结果总是包含native code。

由此可以写出如下函数:

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

转换hyphen-case为camelCase

将hello-world字符串样式转换成helloWorld字符串样式是一个非常常见的需求。为此,可以使用正则表达式。

可以使用/-(\w)/g来匹配所有在–后面的小写字母,然后使用大写字母对它们进行替换。

​7个有助于提升效率的JavaScript Utility函数
  1. functioncamelize(str) { 
  2.     const camelizeRE =/-(\w)/g; 
  3.     return str.replace(camelizeRE,  (_, c) => c ? c.toUpperCase() : ''); 

删除字符串中的HTML标签

出于安全考虑,经常需要从字符串中删除HTML标签。使用一个简单的正则表达式就能轻松完成这项任务。

  1. conststripHTMLTags = str => str.replace(/<[^>]*>/g, ''); 
​7个有助于提升效率的JavaScript Utility函数

反转字符串

反转字符串是一个很常见的需求。为此,可以将一个字符串拆分为一个数组,然后反转该数组并将其连接。

  1. conststripHTMLTags = str => str.replace(/<[^>]*>/g, ''); 
​7个有助于提升效率的JavaScript Utility函数

用逗号将数字格式化为字符串

为了使一个较大的数更易于阅读,经常会在数字中间加一些分隔符。

  • 111111 => 111,111
  • 123456789 => 123,456,789

通常每隔三个数字添加一个逗号。

  1. functionnumberToStringWithComma(number) { 
  2.     // convert number to string 
  3.     let str =String(number); 
  4.     let s =''
  5.     let count =0; 
  6.     for (let i = str.length-1; i >= 0; i--) { 
  7.       s = str[i] + s 
  8.       count++ 
  9.       // add a comma to every three numbers 
  10.       if (count % 3==0&& i != 0) { 
  11.         s =','+ s 
  12.       } 
  13.     } 
  14.     return s 
​7个有助于提升效率的JavaScript Utility函数

转换字节单位为合理单位

在计算机中,文件的大小通常以字节为单位。但如果它是一个很大的数字,对人类来说则是不可读的。

例如,第一次看到98223445B这个数字时,人们很难有任何直观的感觉。但是如果使用93.7MB,就会对它非常熟悉。所以需要写一个便于阅读偏大数字的函数。

  1. functionbytesToSize (bytes) { 
  2.     if (bytes ===0) return'0 B'
  3.     var k =1024; 
  4.     var sizes = ['B''KB''MB''GB''TB''PB''EB''ZB''YB'
  5.     var i =Math.floor(Math.log(bytes) / Math.log(k)) 
  6.     return (bytes / Math.pow(k, i)).toPrecision(3) +' '+ sizes[i] 
​7个有助于提升效率的JavaScript Utility函数

感谢阅读,希望能对你有所帮助~

 

责任编辑:华轩 来源: 今日头条
相关推荐

2019-11-19 12:40:36

AI人工智能开源工具

2021-06-10 09:34:24

前端开发工具开发

2019-11-18 11:07:13

人工智能技术Apache

2018-10-25 14:14:52

云计算机器学习数据分析

2021-08-13 10:33:55

IT经理首席信息官CIO

2022-02-07 15:53:24

开发人员AMDLinux

2010-03-12 16:15:06

Python调试

2022-10-08 08:38:32

物联网

2020-09-21 12:12:23

ICT

2022-08-26 14:20:14

物联网人工智能智慧城市

2021-11-26 05:14:44

开源数据库安全漏洞

2020-03-30 08:17:04

Promise开发JavaScript

2011-12-09 09:31:58

桌面虚拟化

2021-08-06 10:00:29

网站劫持网络攻击网站安全

2020-02-05 13:03:55

数据中心混合云技术

2013-07-17 09:19:23

2017-04-14 10:40:43

SDS系统选择

2023-06-09 19:03:35

开源组织

2019-08-12 07:39:25

数据中心IT开销

2022-09-21 14:12:33

大数据医疗保健
点赞
收藏

51CTO技术栈公众号