js驼峰和中划线连字符相互转化的最佳实践

原创已于 2025-06-19 10:50:15 修改 · 2.9k 阅读

14 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #es6

收录于

于 2020-07-18 16:34:21 首次发布

前端技术专栏收录该内容

12 篇文章

订阅专栏

该博客聚焦于JS中驼峰和中划线连字符的相互转化。内容包含驼峰转连字符、连字符转驼峰的方法，还拓展介绍了replace函数第二个参数为函数的使用方法，适用于使用vue.js、javascript、es6进行开发的场景。

1.驼峰转连字符

  var s = "thisIsTest";
  s = s.replace(/([A-Z])/g,"-$1").toLowerCase();

2.连字符转驼峰

function toHump(name) {
  return name.replace(/\-(\w)/g, function(all, letter){
    console.log(all) //"_T"
    console.log(letter) //"T"
    return letter.toUpperCase();
  });
}

3.拓展（repalce函数第二个参数是函数的使用方法）

var str = 'abcdbc';
str = str.replace(/(b)(c)/g, function() {
    console.log(arguments);
    return '&&';
});
console.log(str);

// 输出如下：
/*
["bc", "b", "c", 1, "abcdbc"]
0: "bc"
1: "b"
2: "c"
3: 1
4: "abcdbc"
...
["bc", "b", "c", 1, "abcdbc"]
0: "bc"
1: "b"
2: "c"
3: 4
4: "abcdbc"
...
a&&d&&

函数参数表示：
- param 1: 匹配到的字符串
- param 2: 匹配的子字符串
- param 3: 匹配的子字符串
- param 4: 匹配到的字符串在字符串中的位置
- param 5: 原始字符串

*/