js で下線とキャメルケースの変換を実装する (複数の方法)

js で下線とキャメルケースの変換を実装する (複数の方法)

適用シナリオ:

バックエンドに渡されるパラメータがキャメルケースで命名され、エコー時にアンダースコアが使用されることがあります。この場合、キー値を変更する必要があります。

方法 1: 正規表現 (推奨)

水平線が下向きのキャメルケース:

関数toLowerLine(str) {
 var temp = str.replace(/[AZ]/g, 関数(一致) { 
  "_" + match.toLowerCase() を返します。
   });
   if(temp.slice(0,1) === '_'){ //最初の文字が大文字の場合、置換を実行するときに余分な _ が追加されるので、ここで削除する必要があります temp = temp.slice(1);
   }
 温度を返します。
};
console.log(toLowerLine("TestToLowerLine")); //test_to_lower_line
console.log(toLowerLine("testToLowerLine")); //test_to_lower_line

下の水平線がキャメルケースになります。

関数 toCamel(str) {
   str.replace(/([^_])(?:_+([^_]))/g、関数($0、$1、$2)を返します{
     $1 + $2.toUpperCase() を返します。
   });
}
console.log(toCamel('test_to_camel')); //testToCamel

方法2: 配列のreduceメソッドを使用する

水平線が下向きのキャメルケース:

関数doLowerLine(前の値、現在の値、現在のインデックス、配列){
 if(/[AZ]/.test(currentValue)){
  現在の値 = 現在の値.toLowerCase();
  if(現在のインデックス===0){
   前の値 + 現在の値を返します。
  }それ以外{
   前の値 + '_' + 現在の値を返します。
  }
 }それ以外{
  前の値 + 現在の値を返します。
 }
}
関数toLowerLine(arr){
 if(arr型 === '文字列'){
  arr = arr.split('');
 }
 arr.reduce(doLowerLine,'') を返します。
}
var a = 'TestToLowerLine';
var res1 = toLowerLine(a); // テスト_to_lower_line
var res2 = [].reduce.call(a,doLowerLine,''); //test_to_lower_line

下の水平線がキャメルケースになります。

関数doCamel(前の値、現在の値、現在のインデックス、配列){
 現在の値 === '_' の場合{
  previousValue + currentValue.toUpperCase() を返します。
 }それ以外{
  前の値 + 現在の値を返します。
 }
}
関数 toCamel(str) {
 if(typeof str === '文字列'){
  str = str.split(''); // 文字配列に変換}
 str.reduce(doCamel) を返します。
}
console.log(toCamel('test_to_camel')); //TestToCamel

方法3: 配列のマップメソッドを使用する

水平線が下向きのキャメルケース:

関数doLowerLine(val, index, arr){
 if(/[AZ]/.test(val)){
  if(インデックス===0){
   val.toLowerCase() を返します。
  }それ以外{
   '_'+val.toLowerCase() を返します。
  }
 }それ以外{
  戻り値:
 }
}
関数toLowerLine(arr){
 if(arr型 === '文字列'){
  [].map.call(arr,doLowerLine).join('') を返します。
  // Array.prototype.map.call(arr, doLowerLine).join('');
 }それ以外{
  arr.map(doLowerLine).join('') を返します。
 }
}
var a = 'TestToLowerLine';
var res1 = [].map.call(a,doLowerLine).join(''); //test_to_lower_line
var res2 = toLowerLine(a); // テスト_to_lower_line

JS 文字列のアンダースコア命名とキャメルケース命名の変換

1. キャメルケースからハイフンへ:

var s = "fooStyleCss";
s = s.replace(/([AZ])/g,"-$1").toLowerCase();
//正規表現を使用して置換します。簡潔で明確、素晴らしい

2. こぶを回す

var s1 = "foo-style-css";
s1 = s1.replace(//-(/w)/g, 関数(すべて, 文字){
          letter.toUpperCase() を返します。
        });
//この部分 2 はよくわかりません。

それで自分で書いてみました。^_^、これはわかりやすいですが、コードが少し多くなっています。

var s = "スタイルシートベース";

var a = s.split("-");
var o = a[0];
for(var i=1;i<a.length;i++){
    o = o + a[i].slice(0,1).toUpperCase() + a[i].slice(1);
}

今度は正規表現を使用して、別のコードを記述します。

var s1 = "スタイルシートベース";
s1 = s1.replace(//-(/w)/g, function(x){return x.slice(1).toUpperCase();});

js アンダーラインとキャメルケース間の変換の実装(複数の方法)に関するこの記事はこれで終わりです。js アンダーラインとキャメルケース間の変換に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • js オブジェクト属性名でキャメルケースを下線に変換するサンプルコード
  • Go 言語の json エンコーディングでキャメルケースを下線と下線に変換し、キャメルケースを変換する実装

<<:  HTML テーブルタグチュートリアル (12): 境界線スタイル属性 FRAME

>>:  Rabbitmq heartbea ハートビート検出メカニズムの原理の分析

推薦する

CSSは半透明の境界と複数の境界のシーン分析を実現します

シナリオ 1:半透明の境界線を実現するには: CSS スタイルのデフォルトの動作により、背景色はコン...

Node.js の非同期ジェネレータと非同期反復の詳細な説明

序文ジェネレーター関数は、async/await が導入される前から JavaScript に存在し...

JS オブジェクト コンストラクター Object.freeze

目次概要例1) オブジェクトをフリーズする2) 配列をフリーズする3) 浅い凍結4) ディープフリー...

キャンバスはスクラッチカード効果を描画します

この記事では、キャンバスでスクラッチカード効果を描画するための具体的なコードを参考までに共有します。...

Linux (Centos7) での redis5 クラスターの構築と使用方法の詳細な説明

目次1. 簡単な説明2. クラスターを作成する手順2.1. ディレクトリを作成する2.2. ソースコ...

この記事はPReact10.5.13のソースコードを理解するのに役立ちます

目次render.js 部分create-context.js 部分差分部分Reactのソースコード...

vue3 コンポーネント通信方法の概要と例

vue3コンポーネントの通信モードは次のとおりです。小道具$放出$expose / 参照$属性vモデ...

404エラーページを作成する際に注意すべき問題の簡単な分析

ウェブサイトを最適化するときは、エラー ページの使い方を学ぶ必要があります。たとえば、ウェブサイトに...

MySQL 基本チュートリアル パート 1 MySQL5.7.18 のインストールと接続チュートリアル

この記事から、MySQL を紹介し学習するための新しい一連の記事がスタートします。なぜ MySQL ...

HTML ハイパーリンク内の中国語文字化けの分析と解決

Vm 内のハイパーリンク URL は、Get 要求のパラメータとして中国語と連結する必要があります。...

docker+gitlab+gitlab-runnerの詳細なデプロイメント

環境サーバー: centos7クライアント: ウィンドウCentos7 に docker+gitla...

CSS で実現される HTML 背景色のグラデーション

エフェクトのスクリーンショット:実装コード:コードをコピーコードは次のとおりです。 <!DOC...

MySQL 全体または単一のテーブルデータのエクスポート

単一のテーブルをエクスポートするmysqldump -u ユーザー -p db名 テーブル名 >...

Vueルーティングルーターの詳細な説明

目次ルーティングプラグインをモジュール方式で使用するルートの使用宣言型ナビゲーションプログラムによる...

フロートをクリアするための CSS メソッドの概要

フロートはWebページのレイアウトでよく使用されますが、フローティングブロックレベル要素は標準のドキ...