如何使用 JavaScript 限制最小值/最大值之间的数字？

Posted 2023-02-25

【中文标题】如何使用 JavaScript 限制最小值/最大值之间的数字？

【英文标题】：How can I use JavaScript to limit a number between a min/max value?

【发布时间】：2011-08-16 02:40:18

【问题描述】：

我想限制两个值之间的数字，我知道在 php 中你可以这样做：

$number = min(max(intval($number), 1), 20);
// this will make $number 1 if it's lower than 1, and 20 if it's higher than 20

我怎样才能在 javascript 中做到这一点，而不必编写多个 if 语句和类似的东西？谢谢。

【参考方案1】：

喜欢这个

var number = Math.min(Math.max(parseInt(number), 1), 20);

现场演示：

function limitNumberWithinRange(num, min, max)
  const MIN = min || 1;
  const MAX = max || 20;
  const parsed = parseInt(num)
  return Math.min(Math.max(parsed, MIN), MAX)


alert(
  limitNumberWithinRange(  prompt("enter a number")   )
)

【讨论】：

做 Javascript 具有 intval(num) 功能。因为我只知道parseInt(num)？

现在我们的答案是相同的，所以我要删除我的。

除非你知道自己在做什么，否则不要使用parseInt，例如parseInt(1e300) === 1。只需使用Math.min(Math.max(number, 1), 20)。

@Sandwich 关注Math.max(number, 1)。这是number 和1 中的最大值。所以当number > 1 时是number，当number <= 1 时是1。即它总是大于或等于1，不管number是什么，只要number是数字（Math.max可以在number不是数字时返回NaN）； Math.max 将最小限制 设置为1。 Math.min 以同样的方式将最大限制设置为20。

@Sandwich 记住，Math.min 和 Math.max 不是 Math.setMinimumLimit 和 Math.setMaximumLimit。不要混淆。

【参考方案2】：

您至少有两个选择：

您可以使用一对条件运算符 (? :)：

number = number > 100 ? 100 : number < 0 ? 0 : number;

或者你可以结合Math.max和Math.min：

number = Math.min(100, Math.max(0, number));

在这两种情况下，你都比较容易混淆，所以如果你在多个地方这样做，你可能会考虑使用实用函数：

function clamp(val, min, max) 
    return val > max ? max : val < min ? min : val;

然后：

number = clamp(number, 0, 100);

【参考方案3】：

使用lodash的clamp方法：

_.clamp(22, 1, 20) // Outputs 20

【讨论】：

这就是我想要的。谢谢

【参考方案4】：

无需解释：

function clamp(value, min, max) 
    return Math.min(Math.max(value, min), max);

【讨论】：

这是否适用于负数，例如 transform -xdeg？

@RyanStone “转换 -xdeg” 是什么意思？它也适用于负值，是的。您可以拨打clamp(-5, -1, 1)，它会返回-1。

意思是在 Css Transform:rotateX(); 中使用它它接受负值.. 通过 Javascript

【参考方案5】：

相关：What's the most elegant way to cap a number to a segment?：

ECMAScript 2017 更新：

Math.clamp(x, lower, upper)

但请注意，截至今天，它是第 1 阶段 proposal。在它得到广泛支持之前，您可以使用polyfill。

【参考方案6】：

我将分享我的强大功能来强制执行整数（因为integer 标签），它具有可选的最小/最大参数和-0 保护等功能：

function toInt(val, min, max)
    val=(val*1 || 0);
    val=(val<0 ? Math.ceil(val) : Math.floor(val));

    min*=1;
    max*=1;

    min=((Number.isNaN(min) ? -Infinity : min) || 0);
    max=((Number.isNaN(max) ? Infinity : max) || 0);

    return Math.min(Math.max(val, min), max);

一些快速说明：

幕后的(... || 0) 正在处理-0 以将其更改为0，这几乎总是你想要的。 min 和max 参数是可选的。当传递空白或无效值时，它们将变为-Infinity 和Infinity，因此它们不会干扰Math.min() 和Math.max()。 您可以将Number.isNaN(x) ECMAScript-6 更改为x!==x（结果仅适用于NaN）以获得与真正旧浏览器的更多兼容性，但这不再是必需的了。

【参考方案7】：

您可以通过添加自己的方法轻松扩展 Math...

ES6

Math.minmax = (value, min, max) => Math.min(Math.max(value, min), max);

ES5

Math.minmax = function(value, min, max)
    return Math.min(Math.max(value, min), max);

【参考方案8】：

使用Math.min 和Math.max。