JS之常见的几种输出方式

红太狼 2022-06-06 02:50 469阅读 0赞

**第一种** alert  
alert（）浏览器的提示框（只有一个确定按钮）。

在alert输出方式中，输出内容都是以字符串格式进行输出的，执行方式是，先将alert括号里面的内容转换成字符串格式的，然后再进行输出

alert(1+1);  // 输出的结果是字符串2
    alert("珠峰培训");   // 在JS中用单引号和双引号包裹起来的都是字符串。
    alert(1) // 提示的结果是字符串（它会把数字转化为字符串）。
    alert(true) // 提示的结果是字符串true。
    alert([1,2,3]) // 提示的结果是1,2,3，不再是数组了，它会把数组转换成字符串了。
    alert({ name:'小明',age:28}) // 提示的字符串[object Object]，不是之前的对象了，把字符串转换成对象了

**第二种** confirm  
confirm在alert的基础上增加了让用户选择性操作（提供两个按钮：确定和取消）  
注意：输出格式也和alert一样也是字符串格式的。  
var flag = confirm(‘确定要删除吗？’);  
alert(flag);  
以后可以根据接收的结果做不同的处理即可。

// 在alert基础上增加了确认和取消两个按钮，
    // 用户可根据需要选择性操作->选择提示框，和alert一样提示的结果都是字符串格式的。
    var flag = confirm('确定要删除吗？');
    alert(flag);
    // 当用户点击确定按钮的时候，得到的结果是布尔类型的true，点击取消或者点击关闭“x”,得到的布尔类型的false，此时我们可以根据接受的结果做不同的处理就知道用户进行什么样的操作了。

**第三种** prompt  
prompt在confirm基础上增加让用户输入的效果。  
prompt用alert判断返回值，当点击取消或者"X"的时候，返回的null，不是字符串类型的。

// 在confirm 的基础上增加一个输入框，可以让用户输入一些文字
    // 例如：删除的时候除了提示用户是否要删除，而且还想让用户输入删除的原因，这时候就可以使用prompt()。
    var flag = prompt('确定要删除吗');
    alert(flag);
    // 当用户点击确定按钮的时候，我们可以获取到用户输入的内容，获取的内容是字符串格式的。（如果用户没输入内容获取到的结果是空字符串）；当用户点击取消或者“X”，得到的结果是null。

var zhufeng = prompt("are you happy?");
    alert(zhufeng);
    alert(typeof zhufeng);

如果在prompt的输出中输入的是null，返回的结果是字符串null，点击取消或者点击关闭的情况，我们得到的是对象Object。

其实我们在真实项目中，尤其在一些需要精美样式的的网站中，我们提示框一般都是自己封装插件和组件来实现的，不会用内置的（使用原生JS进行封装模态框组件。）

**第四种控制台输出**  
控制台输出：方便开发人员进行调试的  
快捷键：一般都是F12，也有的一些事Fn+F12。

优势：**想要输出什么格式的数据都可以**，不像上述三种方式一样，只能输出字符串。  
console.log(\[content\],\[content\]…)  
console.dir相对于console.log来说输出的内容更加具体的详细  
console.table 把JSON数据变为表格展示。

**第五种：** document.write  
在文档中打印一些内容 //几乎已经被淘汰掉了。  
输出的结果打印在浏览器的页面上。