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

推薦する

MySql データベースのサブクエリと高度なアプリケーションの簡単な分析

MySql データベースのサブクエリ:サブクエリ: 選択クエリ ステートメント内に別の選択ステートメ...

JavaScript プロトタイプの詳細

目次1. 概要1.1 プロトタイプとは何ですか? 1.2 プロトタイプを入手する2. プロトタイプの...

HTMLはa要素hrefのURLリンクを自動的に更新したり新しいウィンドウを開いたりする機能を実装する

場合によっては、次のような機能を実装したいことがあります。リンクをクリックします。リンクがブラウザで...

nginx がどのようにして高いパフォーマンスとスケーラビリティを実現するのかを深く理解する

NGINX の全体的なアーキテクチャは、連携して動作する一連のプロセスによって特徴付けられます。メイ...

CSS プロパティ display:flow-root 宣言を 1 つの記事でマスターする

zhangxinxu より https://www.zhangxinxu.com/wordpress...

Vueページジャンプの実装方法

1. this.$router.push() 1. ビュー <テンプレート> <d...

Ubuntu 20.04 Firefox でビデオを再生できない (Flash プラグインがない) 場合の解決策

1. Flashプラグインパッケージのダウンロードアドレス: https://get.adobe.c...

読み取り専用と無効の違い

要約すると: Readonly は入力 (テキスト/パスワード) とテキスト領域に対してのみ有効です...

Vue のスロットリング関数使用時の落とし穴ガイド

序文一般的なビジネス シナリオでは、検索ボックスへの入力が完了した後、検索データを取得するために関連...

Vue で動的に読み込まれたローカル画像を処理する方法

問題を見つける今日は、vue ファイルにローカル画像を導入する際に問題が発生したので、この記事を書き...

Vue組み込みコンポーネントのキープアライブの使用例

目次1. キープアライブの使用使用例: 1. すべてのページをキャッシュする: 2. 条件に基づいて...

MySQL 5.7.13 のインストールと設定方法の Mac でのグラフィック チュートリアル

MySQL 5.7.13 Mac用インストールチュートリアル、非常に詳細で、以下のように記録されてい...

Vueのメソッドとプロパティの詳細な説明

Vueのメソッドとプロパティ1. 方法使用法 1メソッド: {メソッド名: function(){}...

mysql8.0.12 でルートパスワードをリセットする方法

データベースをインストールした後、誤ってインストール ウィンドウを閉じたり、長期間 root ユーザ...

Amap を使用した React 実装例 (react-amap)

React の PC 版は Amap を使用するようにリファクタリングされました。情報を検索したと...