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

推薦する

ウェブフロントエンドコードを書く際の考慮事項のまとめ

1. HTMLタグの前に次のような文を追加するのが最適です。 <!DOCTYPE HTML P...

CSS スタイルの導入方法とその長所と短所の紹介

CSSを導入する3つの方法1. インラインスタイル利点: 書きやすく、重みがある 欠点: 構造とスタ...

Linuxファイルの基本属性の知識ポイントのまとめ

Linux システムは典型的なマルチユーザー システムです。異なるユーザーは異なる立場にあり、異なる...

kindとDockerを使用してローカルKubernetes環境を起動する

導入Kubernetes を使い始めるのに丸一日を費やしたことはありませんか?最近登場したいくつかの...

CSS3 の transition、transform、translate の違いと機能の簡単な分析

変換して翻訳するTransform は、変換と変形を意味します。他の幅属性や高さ属性と同様に、CSS...

ナビゲーションバーのドロップダウンメニューのサンプルコードを実装するためのHTML+CSS

効果コード内の画像は自分で変更できますドロップダウンメニューのHTMLコード <ヘッダークラ​...

テーブルの作成、フィールドの追加、フィールドの変更、インデックスの追加によく使用される MySQL の SQL 文の概要

この記事では、テーブルの作成、フィールドの追加、フィールドの変更、インデックスの追加を行う一般的な ...

CSSはインラインブロックのずれの問題を解決します

もうナンセンスじゃない、郵便番号HTML部分 <div class="positio...

Mac での MySQL と Squel Pro の設定

Node.js の人気に応えて、最近、いくつかのサーバー側機能を実装するために Node.js を使...

MySQL の計画タスクとイベント スケジュール例の分析

この記事では、例を使用して、MySQL の計画されたタスクとイベントのスケジュールについて説明します...

CSS background-blend-modeの仕組みを深く理解する

この記事は共有および集約することを歓迎します。全文を転載する必要はありません。著作権を尊重してくださ...

Centos6にMysql5.7をインストールする方法

環境セントロス6.6 MySQL 5.7インストールシステムがインストールされている場合は、まずアン...

nginxリバースプロキシを介したデバッグコードの実装

背景現在、会社のプロジェクトは、フロントエンドとバックエンドが分離された方法で開発されています。新し...

MySQL 5.7.18 インストーラーのインストール ダウンロード グラフィック チュートリアル

この記事では、MySQL 5.7.18インストーラーの詳細なインストールチュートリアルを参考までに記...

Linux サーバーで MySQL リモート接続を有効にする方法

序文以前の非MKレコードを再編成するためのMySQLの学習説明する有効になっていない場合、データベー...