程序需要向使用者展示结果,有时也需要获得输入。为了与 C、C++、Java 章节保持相同的“输出—格式化—输入—练习”顺序,本节使用浏览器控制台的 console.log() 和浏览器提供的 prompt()。
console.log 输出
console.log() 会把一个或多个值写入开发者控制台。字符串放在引号中;变量名不加引号。字符串中的 \n 表示换行,\t 表示制表符,\" 表示双引号,\\ 表示反斜杠本身。
const course = "JavaScript";
console.log("Hello World!");
console.log("Course:", course);
console.log("\"Hello\nWorld\"");知识测验
题目
哪一项可以结束当前输出行并换行?
拼接与格式化
模板字符串使用反引号包住文字,并用 ${表达式} 插入值。需要固定小数位时,可调用数字的 toFixed();它返回格式化后的字符串。
const length = 10;
const width = 5;
const area = length * width;
console.log(`面积:${length} × ${width} = ${area.toFixed(2)}`);知识测验
题目
如果 area 是 50,哪条语句会显示两位小数?
prompt 输入
在浏览器中,prompt() 会显示输入对话框并返回字符串;选择取消时返回 null。即使用户输入 5,得到的也是字符串 "5"。参与数学运算前可用 Number() 转换,并用 Number.isNaN() 检查失败。
const rawRadius = prompt("请输入半径:");
const radius = Number(rawRadius);
if (Number.isNaN(radius)) {
console.log("请输入有效数字");
} else {
const area = Math.PI * radius * radius;
console.log(`面积:${area.toFixed(2)}`);
}prompt() 是浏览器 Web API;Node.js 读取终端输入需要其他 API。Lab 使用可重复操作的模拟界面,不会真的弹出对话框。
知识测验
题目
浏览器中的 prompt() 可能返回什么?
互动实验
输出实验台
访问权限免费
依次点击三张代码卡,观察每条语句如何改变终端输出。
动手练习
计算两点之间的距离
读取两个坐标点,输出平面距离。
- 分别读取 x1、y1、x2、y2 四个浮点数。
- 按照距离公式计算两点距离。
- 把结果保留两位小数后输出。
动手练习
制作一个温度记录卡
读取一个摄氏温度,把它保存到语义清晰的变量里,计算华氏温度后再输出一份简洁报告。
- 用 prompt() 读取摄氏温度,并用 Number() 转换。
- 把华氏温度保存到变量 fahrenheit 中。
- 再创建一个字符串变量 reportTitle,并把标题与换算结果一起输出。