关于创建String的那点事...

String

首先说明一下,本人是前端小学生级别的菜鸡,吐槽的话请口下留情,在评论区指出错误或者补充不足,我会很喜欢,互喷不会进步,相互指点才会。。。。谢谢大家啦

目录

  • 字面量方式
  • 构造函数方式
  • 区别
    • 等号判断
    • 添加属性
  • Property
    • constructor
    • length
  • Templates
    • 后勾语法
    • 插值语法
    • 标签模板字符串

📌JavaScript字符串是用于存储和操作文本的一种数据类型。

JavaScript字符串是写在引号内的零个或多个字符。

let text = "John Doe";

您可以使用单引号或双引号创建(字面量方式):

let carName1 = "Volvo XC60";  // Double quotes
let carName2 = 'Volvo XC60';  // Single quotes

也可以在字符串中使用引号,只要它们与字符串周围的引号不匹配

let answer1 = "It's alright";
let answer2 = "He is called 'Johnny'";
let answer3 = 'He is called "Johnny"';

字面量方式

直接使用""创建,这里就体现出来了为什么JS是弱类型语言了,因为他在创建的时候并没有直接声明类型,或者强制规定,后续我还可以直接修改(var可以,let不行)。建议参考TypeScript。

//字面量方式
var str = "akun"
console.log(str);//akun
console.log(typeof str); //string
// 弱类型说明
var str = 18  //不报错
console.log(str)
console.log(typeof str);

构造函数方式

📌使用构造函数返回,本质是把其他类型转化为字符串极度不推荐使用

//构造函数方式
let str02 = new String("akun")
console.log(str02); //[String: 'akun']
console.log(typeof str02)  //object

区别

等号判断

📌在 JavaScript 中,使用 == 进行比较时,会发生类型转换,然后再比较值。而字面量方式创建的字符串和构造函数方式创建的字符串在内存中虽然都表示相同的字符串值,但它们的类型是不同的。==号不做数据类型的区别。具体来说,字面量方式创建的字符串是原始类型的字符串,而构造函数方式创建的字符串是对象类型(String 对象)。在使用 === 进行比较时,JavaScript 引擎进行数据类型的转换,因为判断的条件就有他们的数据类型。

//区别
console.log(str == str02) //true   比较值
console.log(str === str02) //false  比较值和类型

添加属性

📌两种创建方式的区别:创建的时候,使用的原型不一样;字面量方式无法添加属性,但是因为构造函数的方式返回的是一个对象类型的字符串,所以可以添加属性。

//添加属性
let str03 = "hello world ";
let str04 = new String("hello world");str03.say = function () {console.log("你猜行不行")
} //error
str03.say(); //errorstr04.say = function () {console.log("这个可以吧")
}
str04.say(); //这个可以吧

Property

📌字符串属性

constructor

属性演示:返回创建字符串对象的原型函数

let str05 = "hello world";
console.log(str05.constructor) //[Function: String]
let str06 = new String("akun");
console.log(str06.constructor)  //[Function: String]

length

要查找字符串的长度,请使用内置的 length 属性:

let str05 = "hello world";
console.log(str05.length)  //11

Templates

📌字符模板

后勾语法

模板文字使用反勾(``)而不是引号(“”)来定义字符串,他会原格式输出内容

let text =  Hello World! ;

使用模板文字,您可以在字符串中使用单引号和双引号:

let text =  He's often called "Johnny" ;

模板文字允许多行字符串:

let text =
`The quick
brown fox
jumps over
the lazy dog`;

插值语法

📌模板文字提供了一种将变量和表达式插值到字符串中的简单方法。该方法称为字符串插值。其语法为:

${...}

模板文字允许字符串中的变量:

let firstName = "John";
let lastName = "Doe";let text = `Welcome ${firstName}, ${lastName}!`;

📌用真实的值自动替换变量称为字符串插值。

模板文字允许字符串中的表达式:

let price = 10;
let VAT = 0.25;let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

标签模板字符串

📌标签模板字符串是一种特殊的语法,它允许你在模板字符串前面放置一个函数,并且将该模板字符串作为参数传递给这个函数。这个函数被称为模板字符串的标签函数,它可以对模板字符串进行处理,并返回处理后的结果。

function links(strings, ...values) {console.log(strings); // 输出模板字符串的所有静态部分[ 'Name: ', ', Age: ', '' ]console.log(values); // 输出模板字符串中插入[ 'John', 30 ]值的数组return "Processed result";
}const name = "John";
const age = 30;const result = links`Name: ${name}, Age: ${age}`;
console.log(result); // 输出:Processed result

在这个示例中,links 函数是一个标签函数,它接受模板字符串的所有静态部分和插入值的数组作为参数。你可以在这个函数中对模板字符串进行任何处理,然后返回处理后的结果。

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

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

相关文章

如何为自己的项目生成changelog

背景 在github上看到人家的更新日志感觉很cool,怎么能给自己项目来一套呢 环境信息 tdstdsdeMacBook-Pro demo-doc % node -v v14.18.1 tdstdsdeMacBook-Pro demo-doc % npm -v 6.14.15硬件信息 型号名称:MacBook Pro版本: 12.6.9芯片&…

活出属于自己的人生

背景 24年高考帷幕落下,一场新的思考与选择悄然来临。对于每一位高考考生,学校和专业都是开启大学新生活的两个前置必选项。但有时候“鱼与熊掌不可兼得”,在分数受限的条件下,是选择一个心仪的专业还是选择一个知名度更高的学校…

QT自定义标题栏窗口其二:实现拖动及可拉伸效果 + 顶部全屏/侧边半屏

1、效果 2、核心代码 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent<

yolov10训练自己的数据集(没有显卡的替代方案)

1.没有显卡的替代方案 robflow https://github.com/tensorflow/models/tree/master/official 模型训练替代方案&#xff1a;嘉楠开发者社区

基于鲸鱼优化的DSN弱栅栏覆盖算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 2.算法运行软件版本 MATLAB2022a 3.部分核心程序 for t1:Itersfor i1:Num%目标函数更新[pa(i),fgai] fitness(xwoa(…

全网最全!25届最近5年上海大学自动化考研院校分析

上海大学 目录 一、学校学院专业简介 二、考试科目指定教材 三、近5年考研分数情况 四、近5年招生录取情况 五、最新一年分数段图表 六、历年真题PDF 七、初试大纲复试大纲 八、学费&奖学金&就业方向 一、学校学院专业简介 二、考试科目指定教材 1、考试科目…

Linux计划任务与日志

计划任务 主要用于完成一些周期性任务及定时任务&#xff0c;Windows中也有该功能&#xff1a; 单次调度执行 yum install -y at安装at工具&#xff0c;systemctl start atd启动服务&#xff0c;使用方法为at 选项 时间 执行内容时间可以自由设置&#xff0c;开启的栏目中输…

【SpringBoot + Vue 尚庭公寓实战】地区信息管理接口实现(九)

【SpringBoot Vue 尚庭公寓实战】地区信息管理接口实现&#xff08;九&#xff09; 文章目录 【SpringBoot Vue 尚庭公寓实战】地区信息管理接口实现&#xff08;九&#xff09;1、业务说明2、数据逻辑模型3、接口实现3.1、查询省份信息列表3.2、根据省份ID查询城市信息列表3…

AGI|以ChatGPT为例,浅析AI究竟能干什么?

目录 一、前言 二、ChatGPT 三、Prompt Engineering 四、神经网络 五、后记 一、前言 当一个新事物的出现&#xff0c;最好的办法就是了解它出现的背景&#xff0c;发展的历史。 当ChatGPT出现在我们面前&#xff0c;多轮对话能力让人震惊&#xff0c;仿佛机器真的可以&qu…

前端科举八股文-REACT篇

前端科举八股文-REACT篇 vue和react有和异同&#xff1f;useEffect中为什么不能使用异步函数&#xff1f;useEffect和useLayoutEffect的区别react的生命周期&#xff1f;state和props的区别&#xff1f; 讲讲你的理解&#xff1f;受控组件和非受控组件的区别讲一下你理解的reac…

vue动态绑定class的几种方式

第一种 基础用法 / <template><div :class"active"></div> </template><script setup> import { ref } from "vue"; const active ref(true); </script><style></style>第二种&#xff1a;三元运算法 …

GPT 大模型应用开发概览

随着大模型的风靡&#xff0c;越来越多的企业希望使用大模型来提高自己的服务能力&#xff0c;即在自己的软件中集成大模型的能力&#xff0c;希望让大模型解决一些特定的问题。 大模型的应用开发&#xff0c;其本质上是提示词工程&#xff0c;如何组好提示词&#xff0c;直接…

【Python的随机数汇总】

​我们写python代码的时候&#xff0c;很少能用得上随机数&#xff0c;但是随机数有很多妙用。例如&#xff0c;在我们做测试数据集的时候&#xff0c;可以构建一个随机的dataframe&#xff1b; 或者在保存数据的时候&#xff0c;可以在每条数据前插入一列作为&#xff0c;不重…

ASP .Net Core创建一个httppost请求并添加证书

ASP .Net Core创建一个httppost请求并添加证书 创建.net Core程序&#xff0c;使用自签名证书&#xff0c;可以处理https的get和post请求。 创建证书 创建自签名证书的流程可以在这里查看&#xff1a; https://blog.csdn.net/GoodCooking/article/details/139815278创建完毕…

充电学习— 9、Typec Pd

GND&#xff1a;线缆接地 TX RX&#xff1a;数据流data传输&#xff0c;支持2.0 3.0 speed兼容 VBUS&#xff1a;线缆cable电源&#xff0c;bus power CC&#xff1a;电缆cable的连接、方向、角色检测和当前模式的配置通道&#xff1b; 有emark时&#xff0c; 一个成为VCONN&am…

Aidlux 1.4 部署homeassistant core 2024.6实录

1 Aidlux 安装 Index of /apk/ (aidlux.com) 基于debain 10.1&#xff0c;改不了内核参数用不了docker&#xff0c;用initd管理而不是systemd&#xff0c;阉割版系统很多安装依赖项要自己摸索补全。 # 1 由于您的系统使用的是 SysVinit 而不是 systemd&#xff0c;更改时区。…

易基因:MeRIP-seq等揭示RNA m6A去甲基化酶调控植物雄性不育的分子机制 | 科研速递

大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。 水稻是全球重要的农作物&#xff0c;也是单子叶植物模型。在水稻中&#xff0c;N6-甲基腺苷&#xff08;m6A&#xff09;mRNA修饰对植物的发育和胁迫响应至关重要。OsFIP37作为m6A甲基化…

线程间通信(生产者和消费者案例)

一、传统的线程间通信的方式 使用 Object: synchronized&#xff1a;阻塞锁 wait()&#xff1a;阻塞当前队列 notifyAll()&#xff1a;唤醒所有阻塞队列 package ProduceAndConsumer;/** Auther:生产者消费者案例1* Date:2024/6/20* Description:qinhao* VERSON:1.8*/public…

聊聊其他之ShowDoc安装部署

聊聊其他之ShowDoc安装部署 Docker离线安装部署 由于很多公司服务器处于内网环境&#xff0c;跟外网阻断&#xff0c;所以需要通过离线的方式进行Docker镜像安装。 Linux环境准备 第一步&#xff1a;检查防火墙&#xff0c;是否关闭。 查看防火墙状态&#xff1a; [rootlo…

【第22章】Vue实战篇之文章分类

文章目录 前言一、文章分类列表查询1. 界面2. 脚本3. 展示 二、文章分类添加1. 界面2. 接口脚本3. 点击事件 三、文章分类编辑1. 界面2. 接口脚本3. 点击事件 四、文章分类删除1. 界面2. 接口脚本3. 点击事件 总结 前言 这里来学习文章分类相关界面和接口的调用(增删改查)。 一…