在前端开发中，百分比是一个非常常见的概念。在过去，我们可能需要使用一个函数或模块来将一个小数转换为百分比字符串。但现在，在ES6中，我们可以用更加优雅的方式来表示百分比数值。
ES6引入了一个新的数据类型，called Template Literals，这使得我们可以在字符串中使用表达式。利用这个新特性，可以轻易地处理百分比数值，下面让我们看一下如何使用。
传统方法
在ES6出现之前，表示百分比最常见的方法是使用toFixed()函数：
const percentage = 0.586;
const formattedPercentage = `${(percentage * 100).toFixed(2)}%`;
console.log(formattedPercentage); // 输出：58.60%在上面的代码中，我们将0.586乘以100，并固定小数点位为2位。其输出结果为"58.60%"。
新方法
使用ES6的Template Literals，我们可以将百分比字符串嵌入到字符串模板中：
const percentage = 0.586;
const formattedPercentage = `${(percentage * 100).toLocaleString('en', { maximumFractionDigits: 2 })}%`;
console.log(formattedPercentage); // 输出：58.6%在上述代码中，我们使用了ES6模板语法（也被称为模板字面量），即反引号(``)来定义字符串。百分比字符串将会嵌入花括号{}中，其他常规字符串内容保留在字符串模板中。
在第二行代码中，我们通过调用toLocaleString()函数来格式化百分比字符串。toLocaleString()函数的第一个参数表示语言代码，这里我们选的是英语。第二个参数是一个配置对象，我们在这里选择了小数部分的最大位数为2。
输出结果为："58.6%"
拓展
除了以上方法外，ES6还有一个新语法叫作解构赋值。解构赋值可以将一个数组或对象中的属性、元素解析出来，并赋值到变量中。这种语法非常适合处理百分比字符串。
const percentage = 0.586;
const [ integer, fraction ] = (percentage * 100).toLocaleString('en', { maximumFractionDigits: 2 })
.split('.');
const formattedPercentage = `${integer}.${fraction}%`;
console.log(formattedPercentage); // 输出：58.6%上述代码中，我们使用解构赋值将经过格式化的百分比字符串分割成了整数部分和小数部分。接下来，我们将它们放在一起，并添加百分号。
输出结果为："58.6%"
结论
使用ES6相对更加简单优雅的方式，在处理表示百分比数值的情况下，能够帮助我们简化代码量，增加代码的可读性和易维护性。同时也可以让我们少使用一些库和模块，让代码更加轻巧和干净。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67063582d91dce0dc859eedf