国际化数字（intl）

上一篇文章我们学习了使用国际化的API对日期进行格式化，本次我们来学习使用国际化API对时间进行格式化；

const num = 58846521.22;

console.log('中国:  ', new Intl.NumberFormat('zh-CN').format(num));
console.log('德国:  ', new Intl.NumberFormat('de-DE').format(num));

● 当然我们也可以像格式化日期一样，使用浏览器的语言来判断用户的地区

const num = 58846521.22;

console.log('中国:  ', new Intl.NumberFormat('zh-CN').format(num));
console.log('德国:  ', new Intl.NumberFormat('de-DE').format(num));

console.log(
  navigator.language,
  new Intl.NumberFormat(navigator.language, options).format(num)
);

● 还可以传入不通的参数，例如给数字加上一个单位，m/s

const num = 58846521.22;

const options = {
  style: 'unit',
  unit: 'mile-per-hour',
};

console.log('中国:  ', new Intl.NumberFormat('zh-CN', options).format(num));
console.log('德国:  ', new Intl.NumberFormat('de-DE', options).format(num));

console.log(
  navigator.language,
  new Intl.NumberFormat(navigator.language, options).format(num)
);

● 或者加入摄氏度之类的温度单位

const num = 58846521.22;

const options = {
  style: 'unit',
  unit: 'celsius',
};

console.log('中国:  ', new Intl.NumberFormat('zh-CN', options).format(num));
console.log('德国:  ', new Intl.NumberFormat('de-DE', options).format(num));

console.log(
  navigator.language,
  new Intl.NumberFormat(navigator.language, options).format(num)
);

● 或者是添加百分号

const options = {
  style: 'percent',
};

console.log('中国:  ', new Intl.NumberFormat('zh-CN', options).format(num));
console.log('德国:  ', new Intl.NumberFormat('de-DE', options).format(num));

console.log(
  navigator.language,
  new Intl.NumberFormat(navigator.language, options).format(num)
);

● 或者是添加欧元或者其他货币符号

const num = 58846521.22;

const options = {
  style: 'currency',
  currency: 'EUR',
};

console.log('中国:  ', new Intl.NumberFormat('zh-CN', options).format(num));
console.log('德国:  ', new Intl.NumberFormat('de-DE', options).format(num));

console.log(
  navigator.language,
  new Intl.NumberFormat(navigator.language, options).format(num)
);

其他的更多的使用方法可以从MDN上面进行查看学习！

实例

现在我们将上面学习的添加到我们的实际项目中去

● 例如，如果我们想要把这里的欧元符号改成中文符号

 movs.forEach(function (mov, i) {
    const type = mov > 0 ? 'deposit' : 'withdrawal';
    const date = new Date(acc.movementsDates[i]);
    const displayDate = formatMovementDate(date, acc.locale);

    const formattedMov = new Intl.NumberFormat(acc.locale, {
      style: 'currency',
      currency: 'CNY',
    }).format(mov);

    const html = `
      <div class="movements__row">
        <div class="movements__type movements__type--${type}">${
      i + 1
    } ${type}</div>
        <div class="movements__date">${displayDate}</div>
        <div class="movements__value">${formattedMov}</div>
      </div>
    `;

    containerMovements.insertAdjacentHTML('afterbegin', html);
  });
};

● 当然，我们可你的那个更加需要从用户上去获取他所在的地区，以便于来显示他的货币符号

 const formattedMov = new Intl.NumberFormat(acc.locale, {
      style: 'currency',
      currency: acc.currency,
    }).format(mov);

● 现在除了存取款和贷款记录，我们要把当前账号的总额什么的也要转换为符合用户地区的货币符号，那么我们将这个功能在外面封装成一个函数，以便于我们在其他模块上使用

const formatCur = function (value, locale, currency) {
  return new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: currency,
  }).format(value);
};

● 之后我们直接用这个函数进行调用

//存取款记录上调用
const formattedMov = formatCur(mov, acc.locale, acc.currency);

//总额调用
const calcDisplayBalance = function (acc) {
  acc.balance = acc.movements.reduce((acc, mov) => acc + mov, 0);
  labelBalance.textContent = formatCur(acc.balance, acc.locale, acc.currency);
};


//总存入调用
const calcDisplaySummary = function (acc) {
  const incomes = acc.movements
    .filter(mov => mov > 0)
    .reduce((acc, mov) => acc + mov, 0);
  labelSumIn.textContent = formatCur(incomes, acc.locale, acc.currency);

//总支出调用
  const out = acc.movements
    .filter(mov => mov < 0)
    .reduce((acc, mov) => acc + mov, 0);
  labelSumOut.textContent = formatCur(Math.abs(out), acc.locale, acc.currency);

//利息调用
  const interest = acc.movements
    .filter(mov => mov > 0)
    .map(deposit => (deposit * acc.interestRate) / 100)
    .filter((int, i, arr) => {
      // console.log(arr);
      return int >= 1;
    })
    .reduce((acc, int) => acc + int, 0);
  labelSumInterest.textContent = formatCur(interest, acc.locale, acc.currency);
};