One, the introduction

Recently I have been working on the background management system, because most of them are some table items, so I often use some formatter, here I talk about some formatting functions that I package and often use. It includes some of its own solutions, such as kilo-differentiation, precision loss, and a first taste of functional programming.

Two, empty data processing

In a normal table, if you don’t return data or if you return NULL, I usually use a “-” as the identifier.

// For empty data, return '-'
export function commonFormatter(cellValue) {
  if(! cellValue && cellValue ! = =0) {
    return The '-'
  }
  return cellValue
}
Copy the code

// Add units
export function padUnit(unit) {
  return function(num) {
    if(! num && num ! = =0) {
      return ' '
    }
    return num + unit
  }
}

Copy the code

Four, thousands of differentiation

Kilobytes are relatively common in tabular data, such as 10,000

export function toThousand(num) {
  const parseNum = Number.parseFloat(num)
  if (Number.isNaN(parseNum)) {
    return ' '
  }
  const numStr = num.toString()
  return numStr.replace(/(\d)(? =(\d{3})+\b)/g.'$1')}Copy the code

// Format the decimal point
export function toFixed(digit) {
  return function(num) {
    const parseNum = Number.parseFloat(num)
    if (Number.isNaN(parseNum)) {
      return ' '
    }
    return parseNum.toFixed(digit)
  }
Copy the code

6. Convert “fen” into “yuan”

For many projects encountered before, the amount is stored in the background database in units, so when the front end is displayed to the user, the front end needs to divide the data into 100. But here’s another problem, lack of precision. My solution was to call the off-the-shelf library MathJS and double wrap the four operations.

// Install mathjs for NPMCopy the code

// Rewrap to math.js file
import * as $math from 'mathjs'

function comp(_func, args) {
  let t = $math.chain($math.bignumber(args[0]))
  for (let i = 1; i < args.length; i++) {
    t = t[_func]($math.bignumber(args[i]))
  }
  // Prevent more than 6 bits from using scientific notation
  return parseFloat(t.done())
}

export function add() {
  return comp('add'.arguments)}export function subtract() {
  return comp('subtract'.arguments)}export function multiply() {
  return comp('multiply'.arguments)}export function divide() {
  return comp('divide'.arguments)}Copy the code

import { divide } from './math.js'
// Convert minutes to yuan
export function penyToYuan(num) {
  const parseNum = Number.parseFloat(num)
  if (Number.isNaN(parseNum)) {
    return ' '
  }
  return divide(parseNum, 100)}Copy the code

/ / compose function
function compose(. funcs) {
  if (funcs.length === 0) {
    return arg= > arg
  }
  if (funcs.length === 1) {
    return funcs[0]}return funcs.reduce((a, b) = > (. args) = >a(b(... args))) }Copy the code

// Sum function
const sum = (a, b) = > a + b
// Divide by 2
const divide = total= > total / 2
// Combine two functions from right to left. The result of the first function is taken as the input parameter of the next function
const fn = compose(divide, sum)
// Run the following command: > 1.5
fn(1.2)
Copy the code

Viii. Rate formatting

// Rate formatting (keep two decimal places and add % units)
export function rateFormatter(value) {
  return compose(commonFormatter, padUnit(The '%'), toFixed(2))(value)
}
Copy the code

// Common formatting of amount (divide 100 into yuan, keep two decimal places, divide thousands, plus unit yuan)
export function priceFormatter(value) {
  return compose(commonFormatter, padUnit('元'), toThousand, toFixed(2), penyToYuan)(value)
}
Copy the code