从 JavaScript 角度学 Python(13) - 输出入资料

前言

接下来讲一点比较互动性质的东西，其实也是为了下一个章节铺陈，不然我真的快没梗了 QQ

输入资料

首先先聊聊 JavaScript 是如何互动这部分，通常如果需要使用者输入资料，然後传给 JavaScript 做一些计算的话，就会搭配 HTML Input 标签与 JavaScript 语法。

最简单的写法就如下：

<input type="text" id="count">

var num = 0;
var count = document.querySelector('#count');
count.addEventListener('input', (e) => {
  num = e.target.value;
  console.log(num);
});

在上面程序码中，我们可以看到我宣告了一个变数，并且设置一个 input 监听事件，当我们在 HTML 画面上按下按键输入时，会触发里面的事件，将 #count 中的值取出来并放置到 num 变数中，相信聪明的你应该会知道 Input 标签取出来的值都会是 String，所以通常来讲我们会需要额外型别转换，但这边我们知道问题就好，底下我也附上 CodePen 给大家简单玩一下：

（置入性行销一下：十分钟快速入门上手 CodePen（有中文翻译））

那麽让我们回到 Python 中，毕竟 Python 是後端语言，因此可以跟我们互动的东西就只有 Terminal (终端机)的画面，而我们该如何使用 Python 来达到透过 Terminal 与使用者互动呢？

这边会使用到一个函式叫做 input()，你可以把它想像成 HTMl 的 Input 标签也可以，如果你觉得这样比较好理解的话。

input() 函式非常的简单，只是在撰写上你必须使用一个变数去接收使用者输入的值，因为这个函式是一个表达式，因此它会回传一个值(如果你对於表达式不熟悉的话，建议可以 参阅此篇)，除此之外 input() 函式内可以输入你要提示使用者的讯息内容：

name = input('请输入你的名字：')

输入完毕之後按下 Enter 按键就可以把使用者输入的结果储存到 name 变数中。

这边额外讲一下，如果你使用了 input() 函式的时候，Python 是会暂时卡在那边的，所以你後面的 print() 是无法呈现的：

print('准备执行姓名召唤。')
name = input('请输入你的名字：')
print('这一行会等使用者输入完毕後才出现')
print(name)

这边要注意一件事情，预设 input() 函式不论你输入什麽值，一率都是回传一个字串：

num = input('请输入数字：')
print(type(name)) # <class 'str'>

因此如果期望结果是一个数值型别的话，可以使用 int() 包覆 input() 确保型别的正确性：

num = int(input('请输入数字：'))
print(type(num)) # <class 'int'>

这边的运作原理是 input 会先执行，当使用者输入完毕之後会回传使用者输入的值，这时候这个值就会被 int() 给型别转换。

但是这边要小心一件事情，如果你输入的是整数 (int()) 之外的型别，例如：浮点数(也就是小数点)的话就会出现型别错误：

额外提一件事情，在使用 Python2 的 input() 时要多加注意一些小细节，因为它会随着使用者输入的型别而变换型别，所以在 Python2 还有另一个函式叫做 raw_input()，这个函式的差异在於，使用者输入的任何数值、浮点数等等，通通都会被当作一个字串，这只是一个小事项要注意而已。

因此在 Python3 的时候就将 input() 与 raw_input() 整合再一起，仅保留 input()，而使用者输入的任何值都会被当成一个字串回传。

输出资料

前面章节的许多地方我们都有一直使用到 print() 这个函式，想必大家都已经对它有一定的熟悉度。

但是...为什麽这边还要特别提到它呢？当然是因为它还有一些特别好玩的骚操作，所以才会再拉出来聊一下。

在 Python 官方文件我们可以看到 print() 是有相当多的参数的：

print(*objects, sep=' ', end='\n', file=sys.stdout, flush=False)

这边先提一下「*objects」的意思是要被输出的参数(值)，如果要输出多个参数(值)时就要使用「,」区隔，例如： print('a', 'b')，这个我们已经撰写过许多次，所以就不再赘述。

因此就来聊一下 print() 两个常用参数，分别是 sep 与 end 参数。

sep 参数

sep 参数预设是空格，因此如果你输入这一段 print('hsiangfeng', 'github', 'io') 的时候会得到像这样的结果：

print('hsiangfeng', 'github', 'io') # hsiangfeng github io

所以你也可以想像原本 print('hsiangfeng', 'github', 'io') 要输出成 hsiangfeng,github,io，只是 sep 参数的关系，而将逗号替换成了空格罢了。

这边来额外举例另一个例子，假设今天有一个 print('hsiangfeng', 'github', 'io')，我希望它输出的时候要变成 hsiangfeng.github.io，那麽就可以使用 sep 来替换原本的空格：

print('hsiangfeng', 'github', 'io', sep='.') # hsiangfeng.github.io

因此善加利用 sep 参数还可以做到以下这种可爱的写法：

print('Hello', 'World', 'Hello', 'Python', sep='(￣ω￣)') # Hello(￣ω￣)World(￣ω￣)Hello(￣ω￣)Python

end 参数

end 参数也是一个非常常使用的参数，它的预设参数是 \n，这是什麽意思呢？简单来讲就是输出时的结尾换行符号，如果你将 end 更改之後在输入以下程序码就会发现呈现结果变了：

print('a', end='|')
print('b', end='|') # 变成 a|b| 一行

你可以比较一下没有替换替换 end 之後的差异：

基本上 file 与 flush 就比较少调整了，所以就不多介绍了。

其实满多输出的语法都有一些好玩的特性，就算是 JavaScript 也是一样，不只有 console.log 等等唷。

参考文献

• Print

作者的话

绍兴酒做的绍兴蛋确实真的不错吃，但是在制作绍兴蛋基本上满建议先做一些事前准备，准备一片当归、些许枸杞下去稍微煮一下，煮过後将当归片挑起来，然後将汤汁放冷，届时再加入约 200cc 的绍兴酒，然後蛋在丢进去汤汁内冷藏一天就可以了。

关於兔兔们

• Tailwind CSS 台湾官网
• Tailwind CSS 台湾 (脸书粉丝专页)
• 兔兔教 × Tailwind CSS Taiwan (脸书社群)
• 兔兔教大本营