广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript 中Utility函数如何使用
  • 563
分享到

JavaScript 中Utility函数如何使用

2024-04-02 19:04:59 563人浏览 薄情痞子
摘要

javascript 中Utility函数如何使用,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。检测浏览器不同的浏览器有不同的

javascript 中Utility函数如何使用,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

检测浏览器

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

例如:

JavaScript 中Utility函数如何使用

Mac OS上的Chrome

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

JavaScript 中Utility函数如何使用

Mac OS上的Firefox

此输出结果中有一个“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。

  • 由用户编写的函数

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

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

JavaScript 中Utility函数如何使用

本机函数

JavaScript 中Utility函数如何使用

用户函数

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

由此可以写出如下函数:

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

转换hyphen-case为camelCase

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

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

JavaScript 中Utility函数如何使用
functioncamelize(str) {     const camelizeRE =/-(\w)/g;     return str.replace(camelizeRE,  (_, c) => c ? c.toUpperCase() : ''); }

删除字符串中的HTML标签

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

conststripHTMLTags = str => str.replace(/<[^>]*>/g, '');
JavaScript 中Utility函数如何使用

反转字符串

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

conststripHTMLTags = str => str.replace(/<[^>]*>/g, '');
JavaScript 中Utility函数如何使用

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

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

  • 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 }
JavaScript 中Utility函数如何使用

转换字节单位为合理单位

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

例如,第一次看到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] }
JavaScript 中Utility函数如何使用

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注编程网JavaScript频道,感谢您对编程网的支持。

--结束END--

本文标题: JavaScript 中Utility函数如何使用

本文链接: https://www.lsjlt.com/news/69916.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript 中Utility函数如何使用
    JavaScript 中Utility函数如何使用,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。检测浏览器不同的浏览器有不同的...
    99+
    2022-10-19
  • javascript中trim函数如何使用
    javascript中trim函数如何使用,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。function trim(str){for(var i&...
    99+
    2023-06-03
  • Javascript中split函数如何使用
    今天就跟大家聊聊有关Javascript中split函数如何使用,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。Javascript中split函数使...
    99+
    2022-10-19
  • JavaScript 中alert()函数如何使用
    这篇文章将为大家详细讲解有关JavaScript 中alert()函数如何使用,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。JavaScript alert...
    99+
    2022-10-19
  • 如何在JavaScript中使用join函数
    如何在JavaScript中使用join函数?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。Java的优点是什么1. 简单,只需理解基本的概念,就可以编写适合于各...
    99+
    2023-06-14
  • JavaScript中如何使用匿名函数
    这篇文章将为大家详细讲解有关JavaScript中如何使用匿名函数,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。循环结构中的JavaScript匿名函数先看...
    99+
    2022-10-19
  • javascript中如何使用运动函数
    今天就跟大家聊聊有关javascript中如何使用运动函数,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。具体如下://封装匀速运动 //参数: //...
    99+
    2022-10-19
  • 如何在JavaScript中使用bind()函数
    这篇文章给大家介绍如何在JavaScript中使用bind()函数,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。1.语法:function.bind(thisArg[,arg1[,arg2[, ...]]])...
    99+
    2023-06-14
  • JavaScript中的call()函数如何使用
    本篇内容介绍了“JavaScript中的call()函数如何使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!this指向指向window:...
    99+
    2023-07-05
  • JavaScript如何使用isDate函数
    这篇文章主要为大家展示了“JavaScript如何使用isDate函数”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript如何使用isDate函数”这篇文章吧。isDate:判断数...
    99+
    2023-06-03
  • JavaScript如何使用isLength函数
    这篇文章将为大家详细讲解有关JavaScript如何使用isLength函数,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。isLength:检查value是否为有效的类数组长度function ...
    99+
    2023-06-03
  • JavaScript如何使用cached函数
    这篇文章将为大家详细讲解有关JavaScript如何使用cached函数,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。cached:记忆函数:缓存函数的运算结果function cached(f...
    99+
    2023-06-03
  • JavaScript如何使用isRegExp函数
    这篇文章主要介绍了JavaScript如何使用isRegExp函数,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。isRegExp:判断数据是不是正则对象function&nb...
    99+
    2023-06-03
  • JavaScript如何使用isFunction函数
    这篇文章主要介绍了JavaScript如何使用isFunction函数,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。isFunction:检查value是不是函数functi...
    99+
    2023-06-03
  • JavaScript如何使用isNative函数
    这篇文章给大家分享的是有关JavaScript如何使用isNative函数的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。isNative:判断value是不是浏览器内置函数内置函数toString后的主体代码块为...
    99+
    2023-06-03
  • JavaScript如何使用isPrimitive函数
    这篇文章将为大家详细讲解有关JavaScript如何使用isPrimitive函数,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。isPrimitive:检测数据是不是原始数据function i...
    99+
    2023-06-03
  • JavaScript如何使用capitalize函数
    这篇文章主要介绍了JavaScript如何使用capitalize函数,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。capitalize:字符串首位大写function&nb...
    99+
    2023-06-03
  • JavaScript如何使用isArray函数
    这篇文章将为大家详细讲解有关JavaScript如何使用isArray函数,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。isArray:判断数据是不是数组类型的数据(Array.isArray的兼容写法)...
    99+
    2023-06-03
  • JavaScript如何使用downloadFile函数
    小编给大家分享一下JavaScript如何使用downloadFile函数,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!downloadFile:base64数据...
    99+
    2023-06-03
  • JavaScript如何使用getExplorerInfo函数
    小编给大家分享一下JavaScript如何使用getExplorerInfo函数,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!getExplorerInfo:获取...
    99+
    2023-06-03
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作