【速記】如何用一行代碼將駝峰風格的字符串轉化成中劃線風格的字符串

Flands 發布于2019-08-23 13:46 / 569人閱讀

摘要：起源今天在閱讀一個庫的關于處理元素自定義屬性的時候，發現了將駝峰風格的字符串轉化成中劃線風格的字符串的技巧，以方便根據來移除實際元素對應的，至于對象的和自定義屬性的對應規則，你可以閱讀這邊文檔發現代碼位置文件匹配大寫字母代碼樣例

起源

今天在閱讀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云服務器云服務器風格字符串代碼風格個字符的代碼將語音轉化為文字的軟件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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