javascript lodashを使ってStart caseに変換する

作成日 2022.02.17
更新日 2022.05.17
javascript lodash
javascript, lodash

javascriptで、lodashを使ってStart caseに変換するサンプルコードを掲載してます。ブラウザはchromeを使用しています。

1. 環境
2. lodash使用
3. Start caseに変換
4. サンプルコード

環境

OS windows10 pro 64bit
Apache 2.4.43
lodash 4.17.21
ブラウザ chrome 101.0.4951.54

windows10にApacheのインストール

Javascript サンプル集はこちら

lodash使用

こちらのサイトから最新版を確認して、CDN版を使用してます。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

Start caseに変換

Start caseに変換するには、「_.startCase」を使用します。

'use strict';

console.log(
  _.startCase('FooBar')
  // Foo Bar
)

console.log(
  _.startCase('Foo Bar')
  // Foo Bar
)

console.log(
  _.startCase('foo-bar')
  // Foo Bar
)

console.log(
  _.startCase('--foo_bar--')
  // Foo Bar
)

console.log(
  _.startCase('__FOO_BAR__')
  // FOO BAR
)

console.log(
  _.startCase('foo.bar')
  // Foo Bar
)

use strictについてはこちら

実行結果を確認すると、変更されていることが確認できます。

サンプルコード

以下は、
「実行」ボタンをクリックして、Start caseに変換した結果を表示するサンプルコードとなります。

※cssには「tailwind」を使用して、アロー関数で関数は定義してます。

アロー関数の使い方

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
</head>

<script>
  

  const hoge = () => {

    const str = 'HOGE-HOGE'

    foo.innerHTML = str

    bar.innerHTML = _.kebabCase(str)

  }

  window.onload = () => {

    btn.onclick = () => { hoge() }

  }

</script>

<body>
  <div class="container mx-auto my-56 w-1/3 px-4">

    <div id="sample" class="flex flex-col justify-center">

      <h1 id="foo" class="font-semibold text-green-500 text-lg mr-auto">変換前</h1>

      <h1 id="bar" class="font-semibold text-gray-500 text-lg mr-auto">実行結果</h1>

      <button id="btn"
        class="mb-2 md:mb-0 bg-transparent hover:bg-green-300 text-green-700 font-semibold hover:text-white py-2 px-4 border border-green-300 hover:border-transparent rounded">
        実行
      </button>

    </div>

  </div>
</body>

</html>

実行結果を確認すると、結果が表示されていることが確認できます。