More than 3 years have passed since last update.

【vue.js】３桁ごとにカンマを入れる正規表現【ES6】

JavaScript
正規表現
es6
Vue.js

Posted at 2020-03-22

3000000→3,000,000を表示されるようにしたい

index.html

<body>
  <div id="app">
    <p>
      合計 {{ sum | numberWithDelimiter }}円  
    </p>
  </div>
  <script src="js/index.js"></script>
</body>

index.js

new Vue({
  el: '#app',
  data() {
    return {
      sum: 3000000
    }
  },
  filters: {
    numberWithDelimiter(value) {
      if(!value) return '0'
      return value.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1, ')
    }
  }
})

window.vm = vm

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up