[js高手之路] 跟GhostWu一起封装一个字符串工具库-扩展camelize与dasherize方法(3)
2023-09-11 14:19:51 时间
在此之前,我们已经完成了4个方法:
trimLeft, trimRight, trim, capitalize
本文,我们扩展驼峰式与下划线转化这两个对称的方法
camelize: 把空格,下划线,中横线后面的首字母大写.
dasherize: 把空格后面的大写字母,大写字母,下划线后面的大写字母,变成 中横线 + 对应的小写字母:
如: MozBorderRadius 变成 -moz-border-radius
1 ; (function (window, undefined) { 2 function init(obj, s) { 3 if (s !== null && s !== undefined) { 4 if (typeof s === 'string') { 5 obj.s = s; 6 } else { 7 obj.s = s.toString(); 8 } 9 } else { 10 obj.s = s; 11 } 12 } 13 14 function G(s) { 15 init(this, s); 16 } 17 18 function GhostWu(s) { 19 return new G(s); 20 } 21 22 var sProto = String.prototype; 23 G.prototype = { 24 constructor: G, 25 capitalize: function () { 26 return new this.constructor(this.s.slice(0, 1).toUpperCase() + this.s.substring(1).toLowerCase()); 27 }, 28 trimLeft: function () { 29 var s; 30 if (sProto.trimLeft === 'undefined') 31 s = this.s.trimLeft(); 32 else 33 s = this.s.replace(/^\s+/g, ''); 34 return new this.constructor(s); 35 }, 36 trimRight: function () { 37 var s; 38 if (sProto.trimRight === 'undefined') 39 s = this.s.trimRight(); 40 else 41 s = this.s.replace(/\s+$/g, ''); 42 return new this.constructor(s); 43 }, 44 trim: function () { 45 var s; 46 if (typeof sProto.trim === 'undefined') { 47 s = this.s.replace(/^\s+|\s+$/g, ''); 48 } else { 49 s = this.s.trim(); 50 } 51 return new this.constructor(s); 52 }, 53 camelize : function () { 54 var s = this.trim().s.replace(/(\-|_|\s)+(.)?/g, function ( s0, s1, s2 ) { 55 return ( s2 ? s2.toUpperCase() : '' ); 56 }); 57 return new this.constructor(s); 58 }, 59 dasherize : function(){ 60 var s = this.trim().s.replace(/[_\s]+/g, '-').replace(/([A-Z])/g, '-$1').replace(/-+/g, '-').toLowerCase(); 61 return new this.constructor(s); 62 } 63 }; 64 65 window.G = GhostWu; 66 })(window, undefined);
console.log( G( 'ghost wu tell you how to learn js').camelize().s );//ghostWuTellYouHowToLearnJsconsole.log( G( 'ghost-wu-tell you how to learn js').camelize().s );//ghostWuTellYouHowToLearnJsconsole.log( G( 'ghost_wu_tell you how to learn js').camelize().s );//ghostWuTellYouHowToLearnJsconsole.log( G( '-moz-border-radius' ).camelize().s );//MozBorderRadius
console.log( G( 'MozBorderRadius' ).dasherize().s ); //-moz-border-radiusconsole.log( G( 'backgroundColor' ).dasherize().s ); //background-colorconsole.log( G( 'background color' ).dasherize().s ); //background-color
相关文章
- js_html_input中autocomplete="off"在chrom中失效的解决办法 使用JS模拟锚点跳转 js如何获取url参数 C#模拟httpwebrequest请求_向服务器模拟cookie发送 实习期学到的技术(一) LinqPad的变量比较功能 ASP.NET EF 使用LinqPad 快速学习Linq
- js格式化日期工具类
- uni-app - 在纯 JS 文件中调用自定义弹框组件 / 封装全局 API 调用弹框组件(解决小程序、APP 无法使用 document.body.appendChild 插入组件节点)适配全端
- 为JS系统内置对象添加自己封装的方法
- ECMAScript、JavaScript、Node.js的区别与联系
- 【JS】for in循环对象,hasOwnProperty()的作用
- jQuery全屏滚动插件fullPage.js
- 【HarmonyOS】【JS】【布局】鸿蒙js开发input 输入框弹出输入法时上方布局被挤扁?
- bignumber.js
- 《Ext JS实战》——1.6 测试
- base.js,通用js方法,Js方法封装
- js和Jquery获取选中select值和文本
- JS模板引擎handlebars.js的简单使用
- [js高手之路]javascript腾讯面试题学习封装一个简易的异步队列
- [js高手之路] 跟GhostWu一起封装一个字符串工具库-架构篇(1)
- js中window.location.search的用法和作用。以及自定义存储和读取localStorage的API(重要)
- 华为OD机试 - 数组排序(JS)
- c#后台List转为js对象(在前台操作)
- log4js-Node.js中的日志管理模块使用与封装
- JS学习笔记-OO疑问之封装
- 一个简单的推断抢购时间是否到达的js函数
- js版根据经纬度计算多边形面积(墨卡托投影)
- JS实现不刷新页面进行排序功能
- 封装异步API-js先执行完一个函数后再执行下面的逻辑或者方法
- 封装公共js,使其他页面可以调用