1. 首页
  2. IT资讯

「JS小技巧」随机不重复ID,标签替换,XML与字符串互转,取整

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002Fbe7d6e98c8404dd792a5d3a55b43aaab” img_width=”899″ img_height=”600″ alt=”「JS小技巧」随机不重复ID,标签替换,XML与字符串互转,取整” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E今天笔者整理了一份自己最近用到的一些小技巧分享给大家,虽然都是基础技术,不过在某些特殊时刻还蛮有用的,不至于加载一堆体积庞大的第三方库。今天笔者用本文归纳一下分享给大家。本篇文章主要包含以下内容:u003Cu002Fpu003Eu003Culu003Eu003Cliu003E产生随机不重复IDu003Cu002Fliu003Eu003Cliu003E模板标签替换u003Cu002Fliu003Eu003Cliu003E字符串与xml的互转u003Cu002Fliu003Eu003Cliu003E快速取整数u003Cu002Fliu003Eu003Cu002Fulu003Eu003Cpu003E本篇文章预计时间u003Cstrongu003E3u003Cu002Fstrongu003E分钟u003Cu002Fpu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F68181f1a22334efe9daa205862436f8f” img_width=”900″ img_height=”585″ alt=”「JS小技巧」随机不重复ID,标签替换,XML与字符串互转,取整” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Ch1u003E产生随机不重复IDu003Cu002Fh1u003Eu003Cpu003E有时候在没有第三方类库的情况下,我们希望希望产生随机且不重复的ID,这时我会使用「随机数」搭配「时间戳」的方式,首先使用Math.random()产生0~1之间约16~17位数的随机浮点数,再通过toString(36)的方法缩短其位数,并转换为36进位( 0~9、a~z ),若嫌太长还可用substr方法进行自行截取。u003Cu002Fpu003Eu003Cpreu003EMath.random().toString(36).substr(2,n);u003Cbru003Eu002Fu002F 截取小数点后的部分,n在实际应用中修改成你需要的位数u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E第二步使用Date.now()取得目前的毫秒数,总共有13位数,和上个方法一样我们通过toString(36)的方法缩短其位数,并转换为36进位,接着用substr自行截取需要的位数。u003Cu002Fpu003Eu003Cpreu003EDate.now().toString(36).substr(4,n);u003Cbru003Eu002Fu002F由于前几位固定,我们从第5位开始进去截取获取随机数,n在实际应用中修改成你需要的位数u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E将随机数的片段和时间戳的片段进行组合,就能产生一个随机不重复的id 。( 应该说重复机率低到不可能重复,如果你遇到重复的,恭喜你,建议你今天买彩票 )u003Cu002Fpu003Eu003Cpreu003EMath.random().toString(36).substr(2,n) + Date.now().toString(36).substr(4,n);u003Cbru003Eu003Cu002Fpreu003Eu003Ch1u003E模板标签替换u003Cu002Fh1u003Eu003Cpu003E开发过程中有时会遇到要取出一段文字中的某些值,如果单纯只是要「替换成别的值」,使用replace()的方法就能轻松实现,对以下这段字符串来说,里面有几个利用{{}}包覆的标签需要你替换,你会怎么做呢:u003Cu002Fpu003Eu003Cblockquoteu003Eu003Cpu003E大家好,我的公众号是{{name}},今年{{age}}岁了,创建于{{year}}年,欢迎你的关注u003Cu002Fpu003Eu003Cu002Fblockquoteu003Eu003Cpu003E如果想要把所有「{{}}」两个大括号内的字替换成对应的值,可以通过以下的方式进行处理,核心的内容就是replace()方法里的正规表达式u002F{{(.*?)}}u002Fg,u002F{|}u002Fg:u003Cu002Fpu003Eu003Cpreu003Econst text = ‘大家好,我的公众号是{{name}},今年{{age}}岁了,创建于{{year}}年,欢迎你的关注’;u003Cbru003Econst obj = {u003Cbru003E name: ‘前端达人’,u003Cbru003E age: 5,u003Cbru003E year: 2014u003Cbru003E};u003Cbru003Econst result = text.replace(u002F{{(.*?)}}u002Fg, e => {u003Cbru003E return obj[e.replace(u002F{|}u002Fg,”)];u003Cbru003E});u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E得到的结果就会是:「大家好,我的公众号是前端达人,今年5岁了,创建于2014年,欢迎你的关注」。u003Cu002Fpu003Eu003Ch1u003EString 转 XML、XML 转 Stringu003Cu002Fh1u003Eu003Cpu003E在JavaScript里如果直接读取XML,得到的会是一些XML节点构成的对象,如果要使用像是replace()..等字串的操作就必须转换成字串String才行,下方程式可以很简单的将XML转换成字串String,处理之后再转回XML。(注:ie需要特殊处理,感兴趣的可以去百度搜索)u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003EXML转字串Stringu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpreu003ExmlToString = (new XMLSerializer()).serializeToString(xmlObject);u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003Eu003Cstrongu003E字串String转XMLu003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpreu003EstringToXML = (new DOMParser()).parseFromString(xmlString, “textu002Fxml”);u003Cbru003Eu003Cu002Fpreu003Eu003Ch1u003E快速取整数u003Cu002Fh1u003Eu003Cpu003E在JavaScript中取整数,最常见的不外乎就是Math.round()四舍五入、Math.floor()返回小于等于给定数字的最大整数和 Math.ceil()函数返回大于或等于一个给定数字的最小整数(无条件进位)三种方法,不过如果通过两个「按位取反两次」~~(两个蚯蚓符号),也可以做到无条件舍去小数点的效果,这也是最快可以取整数的方法,下方的代码会先取得一个0~100的随机数,然后取出整数的部分。u003Cu002Fpu003Eu003Cpreu003Econst num = Math.random() * 100;u003Cbru003Econsole.log(num); u002Fu002F 输出原本的随机数u003Cbru003Econsole.log(~~num); u002Fu002F 无条件舍去小数部分,类似Math.floor()u003Cbru003Eu003Cu002Fpreu003Eu003Cpu003E~是按位取反运算,~~是取反两次。在这里~~的作用是去掉小数部分,因为位运算的操作值要求是整数,其结果也是整数,所以经过位运算的都会自动变成整数。与Math.floor()不同的是,它只是单纯的去掉小数部分,不论正负都不会改变整数部分。u003Cu002Fpu003Eu003Ch1u003E小节u003Cu002Fh1u003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp9.pstatp.comu002Flargeu002Fpgc-imageu002F2ab17a736e364f7bb5921d3d2408bb73″ img_width=”900″ img_height=”600″ alt=”「JS小技巧」随机不重复ID,标签替换,XML与字符串互转,取整” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003Eu003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E今天JS小技巧的分享就到这里,希望能在工作中对你有所帮助,建议大家整理梳理自己日常工作中会用到的小方法和小技巧,维护到自己的方法类库里,到时用的时候会事半功倍。在接下来的文章里,笔者会持续关注这方面的内容,将会整理成文章分享到这个系列里,欢迎你持续关注与订阅。u003Cu002Fpu003Eu003Cpu003E更多精彩内容,请u003Cstrongu003E关注“前端达人”公众号u003Cu002Fstrongu003E!u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:「JS小技巧」随机不重复ID,标签替换,XML与字符串互转,取整

主题测试文章,只做测试使用。发布者:杀手梦三刀,转转请注明出处:http://www.cxybcw.com/10736.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code