JavaScript的四种输出语句(一些使用细节)【js学习笔记1】

在这里插入图片描述

😁 作者简介:一名大四的学生,致力学习前端开发技术
⭐️个人主页:夜宵饽饽的主页
❔ 系列专栏:JavaScript小贴士
👐学习格言:成功不是终点,失败也并非末日,最重要的是继续前进的勇气

1.2,JavaScript的输出

1.2.1,页面输出
<script>
    document.write("在页面显示")
</script>
1.2.2,控制台输出
<script>
    console.log("输出一条日志");
    console.info("输出一条信息");
    console.warn("输出一条警告");
    console.error("输出一条错误");
</script>


输出语句结果

一些使用控制台输出语句技巧:
​ 1.命名日志打印

 function sum(a, b) {

    console.log({b});//关键语句

    return a + b;

    }

sum(1, 2);

sum(4, 5);

日志打印地运行结果

​ 2. 高级化格式

​ 将某些东西打印到控制台最常见方法是简单地使用一个参数调用console.log(),有时我们可能想要打印一条包含多个信息。幸运地是,console.log()可以使用%s,%i 等说明sprintf()格式化字符串

const user = 'john_smith';
const attempts = 5;
console.log(user+"登录失败了"+attempts+"次")//我们也可以用字符串地拼接
console.log('%s 登录失败了 %i 次', user, attempts);//这是高级化格式打印

以下是可用说明符的列表:

说明符作用%s元素转换为字符串

  • %d 或 %i元素转换为整数

  • %f元素转换为浮点数

  • %o元素以最有效的格式显示:

%o说明符(为值关联了正确的打印格式)可以在文本消息中插入数组,对象,DOM元素和常规文本,而不会失去交互性。

const myObject = {

name: 'John Smith',

profession: 'agent'

};

console.log('Neo, be aware of %o', myObject);
  • %O元素以最有效的格式显示

  • %c应用提供的CSS

3.具有样式打印(了解一下即可)

浏览器控制台允许我们将样式应用于打印的消息。

我们可以通过将%c说明符与相应的CSS样式结合使用来实现。例如,让我们发送一条日志消息,该消息显示字体大小和字体粗细情况:

console.log('%c Big message', 'font-size: 36px; font-weight: bold');

说明符%c应用CSS样式’font-size: 36px; font-weight: bold’

4.深度不受限制地cossole.dir()

const myObject = {
    propA: {
    
    propB: {

    propC: { 

    propD: 'hello'  
    
    }
    
    }
    
    }
    
    };
    console.log(myObject)
    console.dir(myObject,{depth:null})

在这里插入图片描述

1.2.3,弹出窗口输出

如何使用JavaScript向弹出窗口输出一句话,请参考以下代码。

<script>
    alert("你好Javascript");
</script>
1.2.4,弹出输入框

如何使用JavaScript弹出窗口输入框,请参考以下代码。

var a=prompt('这是一个输入框')
console.log(a)

  • 19
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值