WebDesign Dackel

JavaScriptを使ってスネークケース・キャメルケース・パスカルケースの変換

JavaScriptを使ってスネークケース・キャメルケース・パスカルケースの変換

Hatena0
Google+0
Pocket0
Feedly0

はじめに

下記のような変換を行うための処理です。

sample_string => sampleString
sample_string => SampleString

この逆もしかりです。
僕の場合、そんなに頻繁に使う機会はありませんが、たまぁ〜に使う文字変換です。jQueryでもcamelCase()があったりしますね。

関数の定義

それぞれの変換用の関数は下記の様に。実行結果は次に書きたいと思います。

/**
 * キャメルケースへ変換 sampleString
 * @param string
 * @return string
 */
function camelCase(str){
  str = str.charAt(0).toLowerCase() + str.slice(1);
  return str.replace(/[-_](.)/g, function(match, group1) {
      return group1.toUpperCase();
  });
}


/**
 * スネークケースへ変換 sample_string
 * @param string
 * @return string
 */
function snakeCase(str){
  var camel = camelCase(str);
  return camel.replace(/[A-Z]/g, function(s){
    return "_" + s.charAt(0).toLowerCase();
  });
}


/**
 * パスカルケースへ変換 SampleString
 * @param string
 * @return string
 */
function pascalCase(str){
  var camel = camelCase(str);
  return camel.charAt(0).toUpperCase() + camel.slice(1);
}

実行結果

実行してみると下記のような結果が得られます。

var stringList = [
  "snake_case_test",
  "camelCaseTest",
  "PascalCaseTest"
];

stringList.forEach(function(str){
  console.log([
    "original: " + str,
    "snakeCase() => " + snakeCase(str),
    "camelCase() => " + camelCase(str),
    "pascalCase() => " + pascalCase(str)
  ].join("n"));
});

/*
original: snake_case_test
snakeCase() => snake_case_test
camelCase() => snakeCaseTest
pascalCase() => SnakeCaseTest

original: camelCaseTest
snakeCase() => camel_case_test
camelCase() => camelCaseTest
pascalCase() => CamelCaseTest

original: PascalCaseTest
snakeCase() => pascal_case_test
camelCase() => pascalCaseTest
pascalCase() => PascalCaseTest
*/

おわりに

もっと沢山の種類を手軽に変換したいんだぁー!という場合、Change Caseというライブラリが使えそうでした。
定数(CONSTANT_CASE)みたいな形式も対応しているみたいです。

スネーク・キャメル・パスカルケースの3種類くらいならわざわざライブラリを入れなくてもこれで充分かなという気がします!

参考サイト

javascriptでキャメルケースとスネークケースの相互変換