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


76

我想在两个值之间限制一个数字,我知道在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语句和类似的东西?谢谢。

Answers:


148

像这样

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)
哈里·乔伊

我不了解php,抱歉,我编辑了它,将其视为用户定义的函数
Govind Malviya

2
现在我们的答案是相同的,所以我要删除我的。
哈里·乔伊

6
parseInt除非您知道自己在做什么,否则请勿使用parseInt(1e300) === 1。只需使用Math.min(Math.max(number, 1), 20)
Oriol

1
@Sandwich记住,Math.min并且Math.max Math.setMinimumLimitMath.setMaximumLimit。不要困惑。
КонстантинВан

17

您至少有两个选择:

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

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);


5

无需进一步说明:

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

这对于负数(例如transform -xdeg)也适用吗?
瑞安·斯通

@RyanStone“转换-xdeg”是什么意思?它也适用于负值,是的。您可以致电clamp(-5, -1, 1),它将返回-1
Neuron

的意思是在CSS转换中使用它:rotateX(); 通过Javascript
Ryan Stone



0

我将共享我的强大功能来强制整数(由于使用了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,这是几乎总是你想要什么。
  • minmax参数都是可选的。传递空白或无效值后,它们将变为-InfinityInfinity因此它们会静默地不会干扰Math.min()Math.max()
  • 您可以将Number.isNaN(x)ECMAScript-6更改为x!==x(仅对于,结果为true NaN),以便与真正的旧浏览器更好地兼容,但这已不再是必须的。
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.