在 JavaScript 中獲取使用者輸入

Shiv Yadav 2023年1月30日 2022年5月5日 JavaScript JavaScript Event JavaScript Input
  1. 從瀏覽器控制檯獲取使用者輸入
  2. 從 NodeJS 控制檯獲取使用者輸入
  3. 使用 prompt-sync 模組從 NodeJS 獲取使用者輸入
在 JavaScript 中獲取使用者輸入

本文將幫助你瞭解如何在 JavaScript 中獲取使用者輸入。

有兩種方法可以在 JavaScript 中獲取使用者輸入,具體取決於你是要從瀏覽器還是 NodeJS 輸入。本指南將幫助你學習兩者。

從瀏覽器控制檯獲取使用者輸入

要要求來自瀏覽器的使用者輸入,你必須使用瀏覽器提供的 prompt() 方法。該方法允許你接受使用者輸入作為字串並將其儲存在變數中,如下所示:

const input = prompt();

此方法還接受一個字串作為附加資訊,以瞭解應用程式需要什麼輸入。

例如,提示輸入使用者名稱的以下程式碼如下所示:

const input = prompt("What's your name?");
alert(`Your name is ${input}`);

alert() 方法顯示結果。你可以根據你的要求將行文字設定為問題或提示。

從 NodeJS 控制檯獲取使用者輸入

要接受來自 NodeJS 控制檯的使用者輸入,你必須使用提供的 readline 模組。

你可以從模組中使用以下命令,例如 require(),如下所示:

const readline = require("readline");

然後你需要例項化附加到輸入流的介面。使用 readline.createInterface() 方法建立介面並將輸入和輸出引數作為物件引數傳遞。

編寫輸入和輸出需要將輸入寫入 process.stdin 並輸出到 process.stdout

這是建立 readline 介面的示例。

const readline = require("readline");

const ql = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

必須在上面程式碼中分配給 q1 變數的介面例項上呼叫 question() 方法以請求使用者輸入。

question() 方法有兩個引數。

  • 你想問使用者的字串問題。
  • 收到響應並將響應傳遞給函式時要執行的回撥函式

你可以跳過引數物件並將回撥函式作為第二個引數傳遞。

最後,你可以通過在回撥函式中呼叫 q1.close() 方法來關閉 q1 介面。

arr.js

const readline = require("readline");

const q1 = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

q1.question("Where do you live? ", function (answer) {
  console.log(`Oh, so you live in ${answer}`);
  console.log("Interface Closed");
  q1.close();
});

使用 prompt-sync 模組從 NodeJS 獲取使用者輸入

首先,你需要使用 NPM 或 Yarn 安裝 prompt-sync 模組,如下所示:

npm install prompt-sync
or
yarn add prompt-sync

然後,你需要 require()prompt-sync 模組。

看看下面的程式碼。

pm.js

const prompt = require("prompt-sync")();
const input = prompt("Where do you live? ");

console.log(`Oh, so you live in ${input}`);

因為此方法是同步的,所以 Node 例項在執行下一行之前等待輸入。

Author: Shiv Yadav
Shiv Yadav avatar Shiv Yadav avatar

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

LinkedIn

相關文章 - JavaScript Event

  • 在 Onclick 事件中呼叫多個 JavaScript 函式
  • 在 JavaScript 中的 HTML 影象標籤上新增 Onclick 事件
  • 使用 JavaScript 模擬點選
  • JavaScript 中的事件目標
  • 用 JavaScript 在 iframe 中實現一個 onload 事件
  • 在 JavaScript 中檢測鍵盤輸入事件
  • 相關文章 - JavaScript Input

  • JavaScript 清除輸入
  • 在 JavaScript 中更改輸入值
  • 如何在 JavaScript 中獲取輸入值