【前端】JavaScript中的字面量概念与应用详解

news2024/11/28 9:52:02

在这里插入图片描述

博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳]
本文专栏: 前端

文章目录

  • 💯前言
  • 💯字面量
    • 1. 数字字面量
    • 2. 字符串字面量
    • 3. 布尔字面量
    • 4. 空值字面量(null)
    • 5. 对象字面量
    • 6. 数组字面量
    • 7. 正则表达式字面量
    • 8. 特殊值字面量
    • 9. 函数字面量(匿名函数表达式)
    • 10. BigInt 字面量
  • 💯小结


在这里插入图片描述


💯前言

  • JavaScript 编程语言中,字面量(Literal) 是一种基本且关键的概念,它贯穿整个开发过程并具有广泛的用途。字面量指的是在代码中直接表达特定的 固定值 的方式,例如 数字字符串布尔值数组对象 等。字面量的 直接性 使得它成为编程语言中最基本的组成部分之一。掌握字面量的概念和其多样的应用场景,对于深入理解 JavaScript 语言特性,以及编写高效简洁可维护 的代码而言,是至关重要的。在本文中,我们将深入探讨 JavaScript 中各种字面量的 概念及其应用,并通过代码示例进行详细的演示,旨在帮助您在项目开发中正确地理解和使用这些字面量。通过全面了解这些 字面量,您将能够在实际开发中更有效地编写代码,从而提升代码的 可读性维护性 以及整体 质量
    JavaScript在这里插入图片描述

💯字面量

在这里插入图片描述
字面量(Literal) 是指代码中直接表示固定值的语法结构。例如,在代码 let number = 42; 中,42 就是一个数字字面量。字面量并不依赖于变量或函数的运行结果,而是代码中明确的 常量值。字面量可以用于多种数据类型,包括 数字字符串布尔值数组对象 等,从而涵盖了广泛的 数据表示需求

JavaScript 中常见的字面量类型包括数字字面量、字符串字面量、布尔字面量、对象字面量、数组字面量、正则表达式字面量等。下面将详细介绍这些 字面量的类型、其 应用场景 以及相关的 使用方式


1. 数字字面量

数字字面量用于表示数值,并且可以以多种形式存在,如整数、浮点数、二进制、八进制、十六进制等。它们在 JavaScript 中是数值操作的核心。
在这里插入图片描述

  • 整数字面量

    let a = 42; // 代表整数 42
    

    在此例中,42 是一个整数字面量,它直接表示变量 a 的值。

  • 浮点数字面量

    let b = 3.14; // 代表浮点数 3.14
    

    数值 3.14 是一个浮点数字面量,用于表示带有小数点的数值,尤其适用于处理精度较高的计算。

  • 科学计数法
    JavaScript 还支持使用科学计数法来表示非常大的或非常小的数值,这对于科学计算非常有用。

    let c = 1.2e3; // 等价于 1.2 * 10³ = 1200
    

    科学计数法提供了一种紧凑的表示方式,用于在代码中处理大数量级或小数量级的数据。

  • 进制表示
    JavaScript 支持不同进制的数字表示,例如二进制、八进制和十六进制:

    // 二进制 (前缀 0b)
    let binary = 0b1010; // 等价于 10
    
    // 八进制 (前缀 0o)
    let octal = 0o52; // 等价于 42
    
    // 十六进制 (前缀 0x)
    let hex = 0x2A; // 等价于 42
    

    不同进制的表示使得 JavaScript 在处理底层操作时更加灵活,尤其是在操作计算机硬件或者需要与低级语言交互的场景中。


2. 字符串字面量

字符串字面量是由引号(单引号 '、双引号 " 或反引号 `)包裹的一串字符序列。字符串字面量用于表示文本数据,并且在 JavaScript 中具有多种用途,例如用户输入、消息显示等。
在这里插入图片描述

  • 单引号和双引号

    let str1 = 'Hello';
    let str2 = "World";
    

    单引号和双引号在 JavaScript 中是等效的,开发者可以根据个人或团队的风格指南自由选择使用哪种类型的引号,只需保持一致即可。

  • 模板字符串
    使用反引号(`)定义的模板字符串支持多行字符串和内嵌表达式,是 JavaScript ES6 中的一项强大功能。

    let name = "Alice";
    let greeting = `Hello, ${name}!`; // 使用模板字符串
    

    模板字符串中的 ${} 语法用于嵌入变量或表达式,这极大地简化了字符串拼接的过程,使得代码更易于维护,特别是在构建动态内容时尤为便利。

  • 特殊字符转义
    在字符串字面量中,可以通过反斜杠(\)来转义特殊字符:

    let quote = "This is a \"quoted\" word"; // 包含引号
    let path = "C:\\Windows"; // 反斜杠的使用
    

    转义字符使得字符串中可以包含引号、反斜杠和其他特殊符号,这在处理文件路径或包含特定符号的文本时尤为有用。


3. 布尔字面量

布尔字面量表示逻辑值 truefalse,这两个值在逻辑判断和条件控制中起着至关重要的作用。
在这里插入图片描述

let isTrue = true;
let isFalse = false;

布尔字面量主要用于控制程序的执行流程,例如在 if 语句、循环或条件运算符中。它们是编程中逻辑控制的基石,尤其在处理条件分支和开关控制的场景中,是不可或缺的。


4. 空值字面量(null)

null 是一种特殊的字面量,表示“空”或“无值”。它通常用于明确地表明某个变量当前不持有任何对象引用。
在这里插入图片描述

let value = null; // 表示变量 value 没有值

undefined 不同,null 是一种有意为之的空值。null 表示对象的缺失,而 undefined 则表示变量尚未初始化。它常用于标识一个对象在特定时刻为空的情况,例如在需要重置对象或判断对象是否存在时。


5. 对象字面量

对象字面量是用花括号 {} 表示的键值对的集合,是 JavaScript 中最重要的数据结构之一。它用于存储复杂的、关联的数据。
在这里插入图片描述

let person = {
  name: "Alice",
  age: 25,
  isStudent: true,
};

对象字面量的键值对由冒号分隔,多个键值对之间用逗号隔开。对象为开发者提供了一种非常灵活和直观的方式来表示和操作数据结构,尤其是在处理 JSON 格式的数据时尤为重要。对象可以嵌套其他对象,从而表示更加复杂的数据结构,这使得它们在大型应用开发中无处不在。


6. 数组字面量

数组字面量表示一个有序的值的集合,用方括号 [] 包裹。它们用于存储一组数据,数据类型可以是任意的。
在这里插入图片描述

let fruits = ["apple", "banana", "cherry"];

数组字面量中的元素可以是不同的数据类型,甚至可以包含对象、数组或函数。数组在 JavaScript 中广泛用于处理列表数据,常见操作包括添加、删除、遍历元素等。JavaScript 提供了丰富的内置方法,如 push()pop()map()filter() 等,使得数组的操作简洁而强大。


7. 正则表达式字面量

JavaScript 支持通过正则表达式来处理字符串的模式匹配。正则表达式字面量使用斜杠 / 来表示。
在这里插入图片描述

let regex = /ab+c/; // 匹配 "a" 后接一个或多个 "b",再接 "c"

正则表达式字面量用于创建正则表达式对象,可直接用于字符串的匹配与替换操作。正则表达式在数据验证、搜索和复杂的文本处理任务中非常有用,是 JavaScript 处理文本的强大工具。


8. 特殊值字面量

  • undefinedundefined 是 JavaScript 中的特殊值,通常由系统赋予未初始化的变量。

    let value; // 未初始化的变量默认为 undefined
    

    当变量声明但未赋值时,其值为 undefined,表示该变量尚未被赋予有效的值。undefined 通常用于检测变量是否已被初始化。

  • NaN:代表“非数字值”(Not a Number)。它通常出现在试图对非数值执行数学运算的情况下。

    let result = Math.sqrt(-1); // NaN
    

    NaN 不是字面量,但它是 JavaScript 中一种特殊的数值状态,表示数值计算中无法得出有效结果的情况。

在这里插入图片描述


9. 函数字面量(匿名函数表达式)

在 JavaScript 中,函数也可以作为字面量。这些匿名函数可以直接赋值给变量或作为参数传递给其他函数。

let greet = function(name) {
  return `Hello, ${name}!`;
};

函数字面量用于定义匿名函数并赋值给变量,或者作为参数传递给其他函数。它使得 JavaScript 在处理回调、事件处理和函数式编程场景中非常灵活。

在这里插入图片描述


10. BigInt 字面量

BigInt 是 JavaScript 中用于表示任意大小整数的一种特殊字面量。它通过在数字后添加 n 后缀来表示。

let bigNum = 1234567890123456789012345678901234567890n;

BigInt 可以处理超出 Number 类型范围的整数,并且在需要高精度运算的场景中(如加密和科学计算)非常有用。BigInt 的引入使得 JavaScript 能够安全地处理极大的整数,而不会因精度损失而导致计算错误。
在这里插入图片描述


💯小结

  • 在这里插入图片描述
    JavaScript 中的字面量是代码中用于直接表示固定值的形式,是程序中定义变量和数据的 核心构件。理解并掌握这些字面量的用法,有助于开发者编写 简洁高效可读性强 的代码。在本文中,我们探讨了 数字字面量字符串字面量布尔字面量对象字面量数组字面量正则表达式字面量 等不同类型的字面量,并结合示例演示了它们的 使用场景和应用
    字面量的灵活性和广泛应用使得 JavaScript 成为一门非常 强大灵活 的编程语言。熟练掌握字面量的概念,不仅能帮助开发者更好地理解 JavaScript 的本质,还能使其在编写代码时更加自如。无论是处理简单数据、构建复杂的数据结构,还是执行 逻辑判断文本操作,字面量都提供了简洁直观的方式来表达程序中的各类值。在不断深入学习 JavaScript 的过程中,您将发现 字面量 是构建应用程序 不可或缺 的部分,它们让代码更具 表现力易于维护扩展
    通过对字面量的全面理解,我们能够更加高效地利用 JavaScript 的特性,编写出具备良好 可读性扩展性 的代码。不论是作为 初学者,还是经验丰富的开发者,深入理解和运用 字面量的概念 都会极大地提升 JavaScript 编程能力。希望通过这篇文章,您能更加深入地掌握 JavaScript 中的字面量,为您的开发之旅增添更多 信心力量

在这里插入图片描述


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2248970.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Kotlin DSL Gradle 指南

本文是关于 Kotlin DSL Gradle 的指南(上篇),介绍了 Gradle 作为 Android 开发构建工具的作用及优势,包括初始配置、生命周期、依赖管理、Task 相关内容。如 Task 的创建、自定义、各种方法和属性,以及文件操作等&…

Web开发:使用stackexchange.redis库对redis进行增删改查

一、安装第三方库 二、官网 StackExchange.Redis |通用型 redis 客户端 三、连接示例 private static string redisConnectionString "localhost:6379,passwordyourpassword,defaultDatabase0,allowAdmintrue,asyncTimeout10000";private static string redisConn…

2024年第15届蓝桥杯C/C++组蓝桥杯JAVA实现

目录 第一题握手,这个直接从49累加到7即可,没啥难度,后面7个不握手就好了,没啥讲的,(然后第二个题填空好难,嘻嘻不会) 第三题.好数​编辑 第四题0R格式 宝石组合 数字接龙 最后一题:拔河 第…

Django基础之路由

一.前言 前面我们说了django的安装于基础配置,基础知识点我就细分下来,每天和大家讲一点,今天就要和大家说django的基础知识点了,我们今天先来讲路由,内容不多,希望大家记住 二.传统路由 路由就是前面一个…

gitlab ssh-key 绑定

windows环境下配置 gitlab的ssh key: 1.打开本地git bash,使用如下命令生成ssh公钥和私钥对: ssh-keygen -t rsa -C xxxxxx.com 2.一直回车; 3.然后打开公钥文件:C:/Users/Administrator/.ssh/id_rsa.pub文件,复制其中的内容; 4…

26.100ASK_T113-PRO 测试摄像头 输出信息

1.测试代码 读到摄象头参数 输出 video_test.c #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <sys/ioctl.h> #include <unistd.h> #include <stdio.h> #include <string.h> #include <linux/type…

【人工智能】深入解析GPT、BERT与Transformer模型|从原理到应用的完整教程

在当今人工智能迅猛发展的时代&#xff0c;自然语言处理&#xff08;NLP&#xff09;领域涌现出许多强大的模型&#xff0c;其中GPT、BERT与Transformer无疑是最受关注的三大巨头。这些模型不仅在学术界引起了广泛讨论&#xff0c;也在工业界得到了广泛应用。那么&#xff0c;G…

【Flink-scala】DataStream编程模型之 窗口的划分-时间概念-窗口计算程序

DataStream编程模型之 窗口的划分-时间概念-窗口计算程序 1. 窗口的划分 1.1 窗口分为&#xff1a;基于时间的窗口 和 基于数量的窗口 基于时间的窗口&#xff1a;基于起始时间戳 和终止时间戳来决定窗口的大小 基于数量的窗口&#xff1a;根据固定的数量定义窗口 的大小 这…

虚拟地址空间与物理内存(Linux系统)

个人主页&#xff1a;敲上瘾-CSDN博客 个人专栏&#xff1a;Linux学习、游戏、数据结构、c语言基础、c学习、算法 目录 问题引入 一、什么是虚拟内存 二、虚拟内存的描述与组织 三、页表的优势 四、虚拟内存区域划分 问题引入 为引入今天的话题&#xff0c;我们先来看下面…

docker-compose搭建xxl-job、mysql

docker-compose搭建xxl-job、mysql 1、搭建docker以及docker-compose2、下载xxl-job需要数据库脚本3、创建文件夹以及docker-compose文件4、坑来了5、正确配置6、验证-运行成功 1、搭建docker以及docker-compose 略 2、下载xxl-job需要数据库脚本 下载地址&#xff1a;https…

【ArcGIS Pro实操第11期】经纬度数据转化成平面坐标数据

经纬度数据转化成平面坐标数据 数据准备ArcGIS操作步骤-投影转换为 Sinusoidal1 投影2 计算几何Python 示例 另&#xff1a;Sinusoidal (World) 和 Sinusoidal (Sphere) 的主要区别参考 数据准备 数据投影&#xff1a; 目标投影&#xff1a;与MODIS数据相同&#xff08;Sinu…

【模型学习之路】PyG的使用+基于点的任务

这一篇是关于PyG的基本使用 目录 前言 PyG的数据结构 演示 图的可视化 基于点的任务 任务分析 MLP GCN 前言 对图结构感兴趣的朋友可以学一下常用的有关图结构的库&#xff1a;networkx详细介绍 networkx 库&#xff0c;探讨它的基本功能、如何创建图、操作图以及其常…

如何监控Elasticsearch集群状态?

大家好&#xff0c;我是锋哥。今天分享关于【如何监控Elasticsearch集群状态&#xff1f;】面试题。希望对大家有帮助&#xff1b; 如何监控Elasticsearch集群状态&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 监控 Elasticsearch 集群的状态对于确保…

Edify 3D: Scalable High-Quality 3D Asset Generation

Deep Imagination Research | NVIDIA 目录 一、Abstract 二、核心内容 1、多视图扩散模型 3、重建模型&#xff1a; 4、数据处理模块&#xff1a; 三、结果 1、文本到 3D 生成结果 2、图像到 3D 生成结果 3、四边形网格拓扑结构 一、Abstract NVIDIA 开发的用于高质量…

QUAD-MxFE平台

QUAD-MxFE平台 16Tx/16Rx直接L/S/C频段采样相控阵/雷达/电子战/卫星通信开发平台 概览 优势和特点 四通道MxFE数字化处理卡 使用MxFE的多通道、宽带系统开发平台 与Xilinx VCU118评估板&#xff08;不包括&#xff09;搭配使用 16个RF接收(Rx)通道&#xff08;32个数字Rx通道…

操作系统 锁——针对实习面试

目录 操作系统 锁什么是死锁&#xff1f;说说死锁产生的条件&#xff1f;死锁如何预防&#xff1f;死锁如何避免&#xff1f;银行家算法具体怎么操作&#xff1f;死锁如何解决&#xff1f;死锁会产生什么影响&#xff1f;乐观锁与悲观锁有什么区别&#xff1f; 操作系统 锁 什么…

UI设计-色彩、层级、字体、边距(一)

一.色彩&#xff1a;色彩可以影响人的心理与行动&#xff0c;具有不同的象征意义&#xff1b;有冷暖&#xff0c;轻重&#xff0c;软硬等等。 1.色彩情绪&#xff1a;最直观的视觉感受 一个活动的页面所用的颜色必须要与其内容相适应&#xff0c;让人看起来舒服。有时我们会不…

从入门到精通数据结构----四大排序(上)

目录 首言&#xff1a; 1. 插入排序 1.1 直接插入排序 1.2 希尔排序 2. 选择排序 2.1 直接选择排序 2.2 堆排序 3. 交换排序 3.1 冒泡排序 3.2 快排 结尾&#xff1a; 首言&#xff1a; 本篇文章主要介绍常见的四大排序&#xff1a;交换排序、选择排序、插入排序、归并排…

【C++第三方库】Muduo库结合ProtoBuf库搭建服务端和客户端的过程和源码

每日激励&#xff1a;“不设限和自我肯定的心态&#xff1a;I can do all things。 — Stephen Curry” 绪论​&#xff1a; 本章我将结合之前的这俩个第三方库快速上手protobuf序列化和反序列化框架和muduo网络&#xff0c;来去实现muduo库在protocol协议搭建服务端和客户端。…

Scala—Map用法详解

Scala—Map用法详解 在 Scala 中&#xff0c;Map 是一种键值对的集合&#xff0c;其中每个键都是唯一的。Scala 提供了两种类型的 Map&#xff1a;不可变 Map 和可变 Map。 1. 不可变集合&#xff08;Map&#xff09; 不可变 Map 是默认的 Map 实现&#xff0c;位于 scala.co…