[javascript入門] 作業効率化のために文字列に関するヘルパー関数まとめ


どのような開発でも、作業効率をアップさせるために処理を関数化し、使い回します。

今回は、様々な文字列操作をヘルパー関数として効率よく利用できるようなメソッドをまとめました。

ヘルパー関数とは

ヘルパー関数とは簡単にいうと、「どこからでも呼び出すことができる、もともと標準で用意されていない独自で作成した関数」と理解してもらえれば良いかと思います。

ヘルパー関数を作成するメリット
  1. 処理を使い回すことができる。
  2. 作業効率がアップする
  3. コード数の減少

関数名を意味不明な名前で作成すると、使う側(保守側)がどうすれば良いかわからなくなってしまうので、作る場合は関数がどのような処理をするのかわかりやすい名前をつけるようにしましょう。

また、ヘルパークラスを用意して、処理系統をまとめることも大事です。

効率化のための文字列操作用ヘルパー関数まとめ

ucWords()

PHPのucwords関数と同じ処理をjavascriptに置き換えた関数です。文字がアルファベットの場合に、最初の文字を大文字に返します。

const ucWords = string => {
  return String(string).toLowerCase().replace(/\b[a-z]/g, (l) => l.toUpperCase())
}

console.log(ucWords("test"));
// Test

ucFirst()

こちらもPHPのucfirst関数を同じ機能を有しています。
文字の最初がアルファベットの場合に、その文字を大文字にします。

const ucFirst = string => {
  if (string) {
      return String(string)[0].toUpperCase() + String(string).substring(1)
  }
}

console.log(ucFirst("t123"));
// T123

snakeCase

プログラマーはよく聞く言葉である「スネークケース」と呼ばれる複数後のフレーズを連結して一語で表現する方法です。今回は連結記号に「_ (アンダーバー)」を利用しています。

const snakeCase = (string, glue = '_') => {
  return string.replace(/\W+/g, " ")
      .split(/ |\B(?=[A-Z])/)
      .map(word => word.toLowerCase())
      .join(glue);
};

console.log(snakeCase("test List Sample"));
// test_list_sample

textTruncate

文字制限などを制御する関数です。50文字以上の場合は「…」に置換するなど、文字列の一部を切り詰める場合に利用します。

const textTruncate = (str, length = null, ending = null) => {
  if (length == null) {
      length = 50;
  }
  if (ending == null) {
      ending = '...';
  }
  if (str.length > length) {
      return str.substring(0, length - ending.length) + ending;
  } else {
      return str;
  }
};

console.log(textTruncate("hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge"));
// hogehogehogehogehogehogehogehogehogehogehogehog...

studlyCase

snakeCaseのように複数の単語を一語にまとめる方法で、単語の最初の文字を大文字にして結合し、一つの単語にまとめる「スタッズリーケース」を作成します。

const studlyCase = string => {
  string = String(string).replace('-', ' ');
  string = string.replace('_', ' ');
  return string.split(' ')
      .map(str => str[0].toUpperCase() + str.substr(1).toLowerCase())
      .join('')
}
console.log(studlyCase("test sample test hogehoge"));
// TestSampleTestHogehoge

最後に

いかがでしたでしょうか?
javascript開発で、StringHelperクラスを用意し、今回のような関数をあらかじめ作っておくことで、効率化できると思います。是非お試しください。