【速记】如何用一行代码将驼峰风格的字符串转化成中划线风格的字符串

Flands 发布于2019-08-23 13:46 / 568人阅读

摘要：起源今天在阅读一个库的关于处理元素自定义属性的时候，发现了将驼峰风格的字符串转化成中划线风格的字符串的技巧，以方便根据来移除实际元素对应的，至于对象的和自定义属性的对应规则，你可以阅读这边文档发现代码位置文件匹配大写字母代码样例

起源

今天在阅读snabbdom（一个Virtual DOM 库）的关于处理元素自定义属性的时候，发现了将驼峰风格的字符串转化成中划线风格的字符串的技巧，以方便根据dataset来移除实际DOM元素对应的attribute，至于DOM对象的dataset和HTML自定义属性的对应规则，你可以阅读这边文档：https://developer.mozilla.org...

发现代码位置

文件src/modules/dataset.ts

import {VNode, VNodeData} from "../vnode";
import {Module} from "./module";

export type Dataset = Record;

const CAPS_REGEX = /[A-Z]/g;  //匹配大写字母

function updateDataset(oldVnode: VNode, vnode: VNode): void {
  let elm: HTMLElement = vnode.elm as HTMLElement,
    oldDataset = (oldVnode.data as VNodeData).dataset,
    dataset = (vnode.data as VNodeData).dataset,
    key: string;

  if (!oldDataset && !dataset) return;
  if (oldDataset === dataset) return;
  oldDataset = oldDataset || {};
  dataset = dataset || {};
  const d = elm.dataset;

  for (key in oldDataset) {
    if (!dataset[key]) {
      if (d) {
        if (key in d) {
          delete d[key];
        }
      } else {
        elm.removeAttribute("data-" + key.replace(CAPS_REGEX, "-$&").toLowerCase()); 
      }
    }
  }
  for (key in dataset) {
    if (oldDataset[key] !== dataset[key]) {
      if (d) {
        d[key] = dataset[key];
      } else {
        elm.setAttribute("data-" + key.replace(CAPS_REGEX, "-$&").toLowerCase(), dataset[key]); 
      }
    }
  }
}

export const datasetModule = {create: updateDataset, update: updateDataset} as Module;
export default datasetModule;

代码样例

"theStringYouWanToChange".replace(/[A-Z]/g,"-$&").toLowerCase();

运行结果

"the-string-you-wan-to-change"

相关文档

String.prototype.replace(): https://developer.mozilla.org...

云服务器 GPU云服务器风格字符串代码风格个字符的代码将语音转化为文字的软件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99519.html

编写可维护的javascript

摘要：为什么要编写可维护的软件生命周期的成本消耗在了维护上。相等具有强制类型转换的机制。检测字符串检测数字检测布尔值检测检测引用值引用值也称为对象，检测某个引用值的类型的官方最好的方法是使用运算符。为什么要编写可维护的javascript? 软件生命周期80%的成本消耗在了维护上。几乎所有的软件维护者都不是它的最初作者。编码规范提高了软件的可读性，它让工程师能够快速且充分地理解新的代...

singerye 2019-08-20 14:03 评论0 收藏0
编写可维护的javascript

摘要：为什么要编写可维护的软件生命周期的成本消耗在了维护上。相等具有强制类型转换的机制。检测字符串检测数字检测布尔值检测检测引用值引用值也称为对象，检测某个引用值的类型的官方最好的方法是使用运算符。为什么要编写可维护的javascript? 软件生命周期80%的成本消耗在了维护上。几乎所有的软件维护者都不是它的最初作者。编码规范提高了软件的可读性，它让工程师能够快速且充分地理解新的代...

weknow619 2019-08-01 16:15 评论0 收藏0
编程风格

摘要：对于构造函数，使用大驼峰式大小写。构造函数的命名应当是名词。引号的使用，字符串，倾向于使用单引号，并始终保持这个风格。块语句间隔，推荐使用风格。风格风格风格此处省略了的使用规范使用规范循环必须使用。基本格式使用4个空格字符作为一个缩进层级，（记得配置编辑器）。不要省略分号。行的长度限定在80个字符。长度超过限制时，选择在运算符之后换行，下一行需要两个层级的缩进。例外，变量...

junfeng777 2019-08-21 10:36 评论0 收藏0
Google 推出的 Java 编码规范

摘要：格式术语说明块状结构指的是一个类，方法或构造函数的主体。方法名或构造函数名与左括号留在同一行。空白垂直空白以下情况需要使用一个空行类内连续的成员之间字段，构造函数，方法，嵌套类，静态初始化块，实例初始化块。前言这份文档是Google Java编程风格规范的完整定义。当且仅当一个Java源文件符合此文档中的规则，我们才认为它符合Google的Java编程风格。与其它的编程风格...

Donne 2019-08-14 15:07 评论0 收藏0
[npm资源] naming-style，快速转换各种命名风格

摘要：一个简单的工具类库，用于将文本转化为不同格式的命名风格如驼峰式连字符式常量式等。 naming-style https://www.npmjs.com/package... 一个简单的工具类库，用于将文本转化为不同格式的命名风格（如：驼峰式、连字符式、常量式等）。安装 yarn add naming-style or npm i naming-style 使用 import { ...

xiao7cn 2019-08-22 18:43 评论0 收藏0