How to realize the conversion between underline and hump in js
This article mainly introduces js how to achieve underlining and hump conversion, the article is very detailed, has a certain reference value, interested friends must read it!
Application scenarios:
Sometimes the parameter passed to the backend is named after the hump, and the echo is underlined, so you need to modify the key value.
Method 1: regular expression (recommended)
Turn the hump down the horizontal line:
Function toLowerLine (str) {var temp = str.replace (/ [Amurz] / g, function (match) {return "_" + match.toLowerCase ();}); if (temp.slice (0Power1) ='_') {/ / if the first letter is uppercase, there will be an extra _ when executing replace, where temp = temp.slice (1);} return temp;}; console.log (toLowerLine ("TestToLowerLine")) / / test_to_lower_lineconsole.log (toLowerLine ("testToLowerLine")); / / test_to_lower_line
Lower horizontal line to hump style:
Function toCamel (str) {return str.replace (/ ([^ _]) (?: + ([^ _])) / g, function ($0, $1, $2) {return $1 + $2.toUpperCase ();} console.log (toCamel ('test_to_camel')); / / testToCamel method 2: using the reduce method of the array
Turn the hump down the horizontal line:
Function doLowerLine (previousValue, currentValue, currentIndex, array) {if (/ [Amurz] / .test (currentValue)) {currentValue = currentValue.toLowerCase (); if (currentIndex===0) {return previousValue + currentValue;} else {return previousValue +'_'+ currentValue;}} else {return previousValue + currentValue;}} function toLowerLine (arr) {if (typeof arr = 'string') {arr = arr.split ('');} return arr.reduce (doLowerLine,'');} var a = 'TestToLowerLine' Var res1 = toLowerLine (a); / / test_to_lower_linevar res2 = [] .reduce.call'); / / test_to_lower_line
Lower horizontal line to hump style:
Function doCamel (previousValue, currentValue, currentIndex, array) {if (currentValue ='_') {return previousValue + currentValue.toUpperCase ();} else {return previousValue + currentValue;}} function toCamel (str) {if (typeof str = 'string') {str = str.split (''); / / convert to character array} return str.reduce (doCamel);} console.log (toCamel ('test_to_camel')); / / TestToCamel method 3: using the map method of the array
Turn the hump down the horizontal line:
Function doLowerLine (val, index, arr) {if (/ [Amurz] / .test (val)) {if (index===0) {return val.toLowerCase ();} else {return'_'+ val.toLowerCase ();}} else {return val;}} function toLowerLine (arr) {if (typeof arr = 'string') {return [] .map.call (arr,doLowerLine) .join ('); / / Array.prototype.map.call (arr,doLowerLine) .join ('') } else {return arr.map (doLowerLine) .join ('');}} var a = 'TestToLowerLine';var res1 = [] .map.call (adome doLowerLine) .join (''); / / test_to_lower_linevar res2 = toLowerLine (a); / / underscore naming of test_to_lower_linJS string and hump naming conversion
1. Hump to hyphen:
Var s = "fooStyleCss"; s = s.replace (/ ([Amurz]) / g, "- $1"). ToLowerCase (); / / replace with regularities, concise and clear, great
two。 Turn the hump
Var S1 = "foo-style-css"; S1 = s1.replace (/ /-(/ w) / g, function (all, letter) {return letter.toUpperCase ();}); / / this paragraph is not very clear
So write one yourself, ^ _ ^, this is easy to understand, but there is too much code.
Var s = "style-sheet-base"; var a = s.split ("-"); var o = a [0]; for