JavaScript三元语句优化及prompt调用TypeError报错解决

Hey there, let's break down your issue step by step:

1. 为什么会触发 TypeError: prompt(...) is not a function？ #

Look at this messy section in your code:

(permit = prompt("Grant Permission", "true or false")(permit === 'true') ? "Access Granted" : permit === "false" && age < 18) ? "Access Denied" : "you are under-aged with no permission"

The core problem here is syntax confusion: after calling prompt(), you immediately added (permit === 'true') — this tries to treat the string returned by prompt() as a function and call it with permit === 'true' as an argument. Strings aren't functions, so the browser throws that TypeError.

Your intended logic is clear: when age < 18, ask for permission, then decide access based on the input. But your nested ternary expressions are completely misstructured, leading to this error.

2. Fixed Code #

First, let's rewrite the logic with clear if-else (way easier to read for multi-branch logic):

let age = +prompt("How old are you?");
let cinema;

if (age > 18) {
  cinema = "Access Granted.";
} else {
  const permit = prompt("Grant Permission", "true or false");
  if (permit === 'true') {
    cinema = "Access Granted";
  } else if (permit === 'false') {
    cinema = "Access Denied";
  } else {
    cinema = "you are under-aged with no permission";
  }
}

alert(cinema);

If you really want to use ternary expressions, keep them structured and readable (no one wants to debug a one-line mess):

let age = +prompt("How old are you?");
const permit = age <= 18 ? prompt("Grant Permission", "true or false") : null;

const cinema = age > 18 
  ? "Access Granted." 
  : permit === 'true'
    ? "Access Granted"
    : permit === 'false'
      ? "Access Denied"
      : "you are under-aged with no permission";

alert(cinema);

By splitting each ternary branch onto its own line and aligning them, the logic becomes instantly clear.

3. Best Practices for Writing Clean Ternary Expressions #

• Avoid deep nesting: If you're nesting more than 2 levels, switch to if-else or extract the logic into a function. Deeply nested ternaries turn into "arrow hell" and are a nightmare to debug.
• Line breaks and alignment: Put each condition and result on its own line, aligning the ? and : to visualize the hierarchy.
• Split complex conditions into variables: Store repeated checks or computed values in variables first, instead of cramming all logic into the ternary.
• Use ternaries for simple 1-2 branch logic: Ternaries are great for short "if A then B else C" scenarios. For multi-branch logic or code with side effects (like prompt() calls), if-else is almost always better.
• Add parentheses for clarity: If your conditions use logical operators (&&, ||), wrap them in parentheses to avoid ambiguity about precedence.

Example of clean vs messy ternaries:

// ❌ Messy: All in one line, hard to parse
const grade = score > 90 ? "A" : score > 80 ? "B" : score > 70 ? "C" : "D";

// ✅ Better: Split into lines, aligned
const grade = score > 90
  ? "A"
  : score > 80
    ? "B"
    : score > 70
      ? "C"
      : "D";

// ✅ Even better: Extract to a function
const getGrade = (score) => {
  if (score > 90) return "A";
  if (score > 80) return "B";
  if (score > 70) return "C";
  return "D";
};
const grade = getGrade(score);

内容的提问来源于stack exchange，提问作者Favour George