JavaScript使ってるけどこんな時どうしたらいいか困った時に使えるTips

このエントリーをはてなブックマークに追加

JavaScript使ってるけどこんな時どうしたらいいか困った時に使えるTips

JavaScript使っていて日付のデータになんか色々付いてる!とか、金額にカンマつけたいとかといった時に使えるJavaScriptの関数をいくつか紹介します。
僕も仕事で使っているものなので結構おすすめです。まだ少ないんですけど、随時更新していこうかなと思っています。ちなみに、jQueryは使っていません。

Ads

サーバーから取得する日付をいい感じに表示したい

日付をAPIで受け取ったけど2017-1-1T00:00:00+09:00ってなってて困ったことないです?
2017/1/1とかにしたくなりますよね。

そんな時に使える関数です。

年だけ使いたいとか月だけ使いたいとかにも対応しています。

function formatDate(datetime, type) {
  if (typeof datetime === 'string') {
    switch (type) {
      case 'year':
        return datetime.replace(/(\d{4}).?(\d{1,2}).?(\d{1,2}).*/g, '$1')
      case 'month':
        return datetime.replace(/(\d{4}).?(\d{1,2}).?(\d{1,2}).*/g, '$2')
      case 'day':
        return datetime.replace(/(\d{4}).?(\d{1,2}).?(\d{1,2}).*/g, '$3')
      default:
        return datetime.replace(/(\d{4}).?(\d{1,2}).?(\d{1,2}).*/g, '$1/$2/$3')
    }
  }
  return datetime
}

formatDateの使い方

年月日で表示

formatDate('2017-1-1T00:00:00+09:00')

個別に表示

formatDate('2017-1-1T00:00:00+09:00', 'year')
formatDate('2017-1-1T00:00:00+09:00', 'month')
formatDate('2017-1-1T00:00:00+09:00', 'day')

数値データにカンマを入れたい

金額などを表す数字に対してカンマを入れたい時に使います。

function commaSeparated(number) {
  return String(number).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,')
}

commaSeparatedの使い方

commaSeparated(2044345)

パーセント表示のデータを四捨五入したい

0.3456789みたいな小数点のある数字をパーセント表示34.5%みたいに表示したい場合に使います。
ちなみに、四捨五入する位置を指定して使います。

function perMathRound(num, coef) {
  const p = Math.pow(10, coef)
  let i = num * p * 100
  i = Math.round(i)
  return i/p
}

perMathRoundの使い方

perMathRound(0.3456789, 1) // 35と表示
perMathRound(0.3456789, 2) // 34.6と表示
perMathRound(0.3456789, 3) // 34.57と表示

郵便番号みたいに途中でハイフンを入れたい

'1234567'のような数字(文字列)にハイフン-を挿入して郵便番号のように表示します。

function insertStr(str, index, insert) {
  return str.slice(0, index) + insert + str.slice(index, str.length);
}

insertStrの使い方

文字列で数字を渡して文字列を挿入する場所と挿入する文字列を指定します。

insertStr('1234567', 3, '-')

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

このエントリーをはてなブックマークに追加

同じカテゴリーの記事

Ads
ページの先頭へ