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

推薦する

JavaScript における一般的な配列操作

目次1. 連結() 2. 結合() 3. プッシュ() 5. シフト() 6. シフト解除() 7....

NavicatがMySQLに接続すると、10060、1045エラーとmy.iniの場所が報告されます。

Navicat は、データベースに接続するときにエラー 10060 および 1045 を報告します...

webpackコード断片化の実装

目次背景コモンズチャンクプラグイン分割チャンク構成リソースを非同期に読み込む要約する背景高性能なアプ...

CSS 擬似要素::マーカーの詳細な説明

この記事では、CSS ::markerの興味深い疑似要素を紹介します。これを使用すると、テキスト番号...

Vue のフィルターの適用シナリオの詳細な説明

filterは通常、特定の値をフィルターするために使用されます。たとえば、フィールドが空だが、フロン...

JavaScript排他的思考の具体的な実装

前回のブログで、Xiao Xiong は関連する要素の操作方法を更新しましたが、同じ要素のグループが...

JavaScriptは、ユーザーがチェックボックスをオンにする必要があるプロトコルの例を実装します。

js では、ログインまたは登録を確認する前に、ユーザーが特定の契約書を読むように設定します (使用...

MySQL スケジュール バックアップ ソリューション (Linux crontab を使用)

序文この世の愛には値段のつくものもありますが、データには値段のつけられないものがあります。将来、誤っ...

MySQLデータ損失のトラブルシューティング事例

目次序文現地調査ケースの再現要約する序文最近、友人が突然WeChatで連絡してきて、MySQLでデー...

Linux カーネル デバイス ドライバー システム コールに関する注意事項

/**************************** * システムコール**********...

Linux でテキストを表示するためのヒント (非常に実用的!)

序文日常の開発では、サーバー上でさまざまなテキストやログの表示操作を実行する必要があることがよくあり...

Idea の起動速度を改善し、Tomcat ログの文字化けを解決する方法

目次序文アイデアの起動速度Tomcat ログが文字化けしている序文Idea を再インストールしたので...

VMware 仮想マシン ubuntu18.04 インストール チュートリアル

インストール手順1. 仮想マシンを作成する 2. [カスタム(詳細)]を選択し、[次へ]をクリックし...

Linuxサーバ侵入緊急対応記録(概要)

最近、お客様から支援の依頼を受けました。管理されている通信コンピュータ ルームから、サーバーの 1 ...

Vue はデータの変更をどのように追跡しますか?

目次背景例誤解 - コールスタックを表示するためにウォッチでブレークポイントを設定する正しいアプロー...