当前位置：首页 > JavaScript

js实现单位转化

2026-02-02 22:45:04JavaScript

实现单位转换的方法

使用函数封装转换逻辑

通过定义函数封装不同单位之间的转换逻辑，例如长度、重量、温度等。

// 长度单位转换（米与英尺）
function meterToFeet(meter) {
    return meter * 3.28084;
}

function feetToMeter(feet) {
    return feet / 3.28084;
}

// 温度转换（摄氏与华氏）
function celsiusToFahrenheit(celsius) {
    return (celsius * 9/5) + 32;
}

function fahrenheitToCelsius(fahrenheit) {
    return (fahrenheit - 32) * 5/9;
}

使用对象存储转换关系

将单位转换关系存储在对象中，便于扩展和管理。

const unitConverter = {
    length: {
        meter: {
            feet: (val) => val * 3.28084,
            inch: (val) => val * 39.3701
        },
        feet: {
            meter: (val) => val / 3.28084
        }
    },
    temperature: {
        celsius: {
            fahrenheit: (val) => (val * 9/5) + 32
        }
    }
};

// 调用示例
const metersToFeet = unitConverter.length.meter.feet(5);

动态表单实现交互

结合HTML表单动态实现用户输入的单位转换。

<input type="number" id="inputValue" placeholder="输入数值">
<select id="fromUnit">
    <option value="meter">米</option>
    <option value="celsius">摄氏度</option>
</select>
<select id="toUnit">
    <option value="feet">英尺</option>
    <option value="fahrenheit">华氏度</option>
</select>
<button onclick="convert()">转换</button>
<p id="result"></p>

<script>
function convert() {
    const value = parseFloat(document.getElementById('inputValue').value);
    const fromUnit = document.getElementById('fromUnit').value;
    const toUnit = document.getElementById('toUnit').value;
    let result;

    if (fromUnit === 'meter' && toUnit === 'feet') {
        result = meterToFeet(value);
    } else if (fromUnit === 'celsius' && toUnit === 'fahrenheit') {
        result = celsiusToFahrenheit(value);
    }

    document.getElementById('result').textContent = `结果: ${result}`;
}
</script>

使用第三方库

对于复杂场景，可以使用成熟的单位转换库如convert-units。

// 安装库：npm install convert-units
import convert from 'convert-units';

// 示例：将5千米转换为英里
const result = convert(5).from('km').to('mi');
console.log(result); // 输出转换结果