キャメルケースから半角スペース込みの小文字へ置換

１．キャメルケースのid名を、小文字にして半角スペースをはさむ形に置換する
（例）
veryFast => very fast
２．正規表現とreplaceメソッドを用いる。

一応、変換出来ましたが正規表現が苦手なため、冗長なコードになってしまいました。
もっと簡潔に処理出来る方法がございましたら教えて下さい。
よろしくお願い致します。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title></title>
6</head>
7<body>
8  <div id="veryFast"></div>
9  <div id="fast"></div>
10  <div id="default"></div>
11  <div id="slow"></div>
12  <div id="verySlow"></div>
13<script src="js/jquery-3.6.0.min.js"></script>
14<script src="js/app.js"></script>
15</body>
16</html>

jQuery
1$(function() {
2  $('div')
3    .css({
4      'backgroundColor' : 'green',
5      'color'           : 'white',
6      'float'           : 'left',
7      'fontSize'        : 24,
8      'margin'          : 10,
9      'padding'         : 5
10    })
11    .width(100)
12    .height(100)
13    .text(function(index) { // 自分なりのコールバック関数
14      return this.id.replace(/[A-Z]/g, function(string) {
15        return ` ${string.toLowerCase()}`;
16      });
17    })
18    .hide();
19
20  $('#veryFast').show();
21  $('#fast').show('fast');
22  $('#default').show('default');
23  $('#slow').show('slow');
24  $('#verySlow').show(2000);
25});

m.ts10806

2022/09/13 12:23

冗長ですか？十分だと思うのですが。

yambejp

2022/09/15 01:11

idを表示するというのはやや汎用性に欠けるようなきがしますカスタムデータを利用するとかの方が文字変換も不要ですし効率的です

行動規範の内容に同意します

回答1件

ベストアンサー

質問のコードでもよいかと思いますが、詰めるとすれば replace の第2引数のコールバックを

diff
1-  function(string) {
2-    return ` ${string.toLowerCase()}`;
3-  }
4+  m => ` ${m.toLowerCase()}`

とするとかですかね。で、コードレビューで「コールバックの第1引数名が m だと分かりにくい（手を抜きすぎ）」みたいな指摘をされたら match に修正すると。少なくともstring よりも match のほうがよいかと思います。(MDNのreplaceの説明でも第1引数名は match　になっています。）

投稿2022/09/13 12:56

編集2022/09/13 13:02