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 ハートビート検出メカニズムの原理の分析

推薦する

CentOS 8 インストール図 (超詳細なチュートリアル)

CentOS 8 が正式にリリースされました! CentOS は Red Hat の再配布ポリシー...

さまざまなターミナルで Mac が SSH 経由でリモート サーバーに接続する方法の説明

Macはシェル(ターミナル)SSHを使用してリモートサーバーに接続します前提条件: 接続する必要があ...

JSはreduce()メソッドを使用してツリー構造データを処理します

目次意味文法例1. 初期値initが渡されない2. 初期値を渡す場合3. アレイの重複排除4. Re...

サーバーから返される14の一般的なHTTPステータスコードの詳細な説明

HTTP ステータス コードステータス コードは 3 桁の数字と理由フレーズ (最も一般的なもの: ...

MySQL クイックデータ比較テクニック

MySQL の運用と保守において、R&D の同僚が 2 つの異なるインスタンスのデータを比較...

jQueryで劇場の座席選択と予約の効果を実現

jQueryは劇場の座席選択と予約の効果を実現します。参考までに、具体的な内容は次のとおりです。効果...

setup+ref+reactive は vue3 の応答性を実装します

セットアップは、結合された API を記述するために使用されます。テンプレートが使用できるようにする...

Docker で FastDFS ファイル システムを構築する (マルチイメージ チュートリアル)

目次FastDFSについて1. 画像を検索する2. イメージをインストールする3.1. 必要なディレ...

docker redis5.0 clusterの実装 クラスタ構築

システム環境: Ubuntu 16.04LTSこの記事では、6 つの Docker コンテナを使用し...

デザイン参考 WordPressウェブサイト構築成功事例

これら 16 のサイトはそれぞれ注意深く読む価値があり、どのサイトでも推奨されている Web サイト...

CentOS 7.4 に MySQL 5.7 を手動でインストールする方法

MySQL データベースは、特に JAVA プログラマーの間で広く使用されています。クラウド データ...

MySQLのワークベンチ例の詳細な説明

MySQL Workbench - モデリングおよび設計ツール1. モデルは、最も効果的で高性能なデ...

MySQLがデータの削除を推奨しない理由

目次序文InnoDB ストレージ アーキテクチャInnodb テーブルスペースインドストレージディス...

Vue + Axios リクエストインターフェース方式とパラメータ渡し方式の詳しい説明

目次1. リクエストを取得する: 2. 投稿リクエスト: 3. 拡張と補足Vue スキャフォールディ...

VMware 仮想マシンのインストール win7 オペレーティング システム チュートリアル ダイアグラム

VMwareaのインストールプロセスは説明しませんが、主にwin7イメージをロードする方法を説明しま...