js 字符串拼接的4种方法

news2024/9/20 8:42:12

一、使用连接符 + 把想要连接的字符串串起来

let shy = '帅哥'
let a =  '我是' + shy
console.log(a)  // 我是帅哥

二、模板字符串

模板字符串(template string)是增强版的字符串,用反引号(`)标识,特点:

1) 字符串中可以出现换行符

2) 可以使用 ${xxx} 形式输出变量

1. 最基础的变量拼接

// 变量拼接
let shy = '帅哥'
let a =  `我是${shy}`
console.log(a)  // 我是帅哥

2. 在模版字符串中使用htnl代码以及多行文本代码

// html代码以及换行文本
let hi=`<div>
    <h2>你好呀!</h2>
</div>`
console.log(hi)  // 原样输出,包括换行

3. 插入一个表达式

// 插入表达式
let x=30;
let y=10;
let a=`x-y=${x-y}`
console.log(a)  // 输出表达式计算结果

4. 在模版字符串里面调用函数表达式

let food=function(){
    return "苹果"
}
let a=`我喜欢吃${food()}`;
console.log(a)

 

三、使用 js的 concat() 方法连接字符串或数组

concat() 方法用于连接两个或多个数组或者字符串。

该方法不会改变现有的数组,而仅仅会返回被连接的新数组。

字符串就会拼接在一起

// 拼接数组
let a = ['java']
let b = ['script']

let str = a.concat(b)

console.log(a)
console.log(b)
console.log(str)  //  ["java", "script"]

 

// 拼接字符串
let a = 'java'
let b = 'script'

let str = a.concat(b)

console.log(a)
console.log(b)
console.log(str)  // javascript

四、使用 js的 join() 方法,把数组中的所有元素放入一个字符串

join() 方法把数组中的所有元素放入一个字符串:

join()——默认每个元素中之间是逗号隔开

join("-")——每个元素之间以- 隔开,分隔符可自定义

var arr=[1,2,3];
var str=arr.join();// 默认是逗号,也可以自定义连接符
var str2=arr.join('-');// 自定义连接符-
var str3=arr.join('.');// 自定义连接符-
console.log(arr); // [1,2,3]
console.log(str); // 1,2,3
console.log(str2); // 1-2-3
console.log(str3); // 1.2.3

 

参考资料: 1、 https://blog.csdn.net/chenjunxing1992/article/details/125514168?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-1-125514168-blog-128062139.235^v35^pc_relevant_increate_t0_download_v2&spm=1001.2101.3001.4242.2&utm_relevant_index=4

2、 js 字符串拼接的几种方法_sunhongyu007的博客-CSDN博客

3、 常用的数组Api(方法)_lse717的博客-CSDN博客

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

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

相关文章

【C++】-6- 模板初阶

文章目录 引入——泛型编程一、函数模板1.函数模板格式2.函数模板原理3.模板的实例化4.模板参数的匹配原则 二、类模板0.引入1.类模板的定义格式2.类模板的实例化 引入——泛型编程 如果我们需要实现不同数据类型的Swap函数&#xff0c;需要手写很多内容类似的结构。如下。 v…

【Gragph Data Mining】VF2算法 — 图同构匹配的算法

VF2算法是一种用于图同构匹配的算法&#xff0c;可以判断两个图是否同构。VF2算法最初由L. P. Cordella等人在1981年提出&#xff0c;后经过多次改进和优化&#xff0c;已成为常用的图同构匹配算法之一。VF2算法的基本思想是通过递归地搜索两个图的节点匹配&#xff0c;从而判断…

总结847

学习目标&#xff1a; 月目标&#xff1a;5月&#xff08;张宇强化前10讲&#xff0c;背诵15篇短文&#xff0c;熟词僻义300词基础词&#xff09; 周目标&#xff1a;张宇强化前3讲并完成相应的习题并记录&#xff0c;英语背3篇文章并回诵 每日必复习&#xff08;5分钟&#…

概率密度函数可视化

概率密度函数可视化 文章目录 概率密度函数可视化[toc]1 一维随机变量情形2 二维随机变量情形 1 一维随机变量情形 以正态概率密度函数为例&#xff0c;其中位置参数为 μ \mu μ&#xff0c;尺度参数为 σ \sigma σ&#xff0c; f ( x ) 1 2 π σ e − ( x − μ ) 2 2 σ…

ChatGPT聊天新玩意:如何让AI成为你的聊天好友?

目录 引言&#xff1a; 案例&#xff1a; 淄博旅游第一版本&#xff1a; 分析&#xff1a; 淄博旅游第二版本&#xff1a; 分析&#xff1a; 总结&#xff1a; 万能公式&#xff1a; 引言&#xff1a; ChatGPT是什么&#xff1f;今天用一句话概括&#xff0c;它就是新…

翻译: 面向开发人员的GPT提示工程 GPT Prompt Engineering for Developers

1. 提示指南Guidelines for Prompting 在本课中&#xff0c;您将练习两个提示原则及其相关策略&#xff0c;以便为大型语言模型编写有效的提示。 In this lesson, you’ll practice two prompting principles and their related tactics in order to write effective prompts …

7搜索管理

7搜索管理 7.1 准备环境 7.1.1 创建映射 创建xc_course索引库。 创建如下映射 post&#xff1a;http://localhost:9200/xc_course/doc/_mapping 参考 “资料”–》搜索测试-初始化数据.txt { "properties": { "description": { "type": &…

C语言操作符详解

该内容全部代码请看&#xff1a;gitee仓库 第一部分&#xff1a; 板书部分&#xff1a; 1、操作符的分类&#xff1a; 注意&#xff1a; 移位操作符和位操作符 单目操作符中有sizeof 逗号表达式 2、算术操作符&#xff1a; 注意&#xff1a; 除法的使用 取模运算 3、移位操…

485接口的温湿度传感器和RJ45接口的温湿度传感器选择分析

工业以太网RJ45接口 网口温湿度传感器和RS485信号输出温湿度传感器的分析对比 主要适用场合&#xff1a;大型厂房、跨区域机房、多机房、机柜、数据机房、服务器机房、大数据中心、户外电站等 主要区别&#xff1a;以太网温湿度传感器输出信号RJ45&#xff0c;RS485温湿度传…

【JAVA面试】缓存穿透、缓存击穿、缓存雪崩

提示&#xff1a;文章先作为初版&#xff0c;等后续时间充足后&#xff0c;补充更深的内容 文章目录 缓存穿透、缓存击穿、缓存雪崩一、区别二、线程安全问题 缓存穿透、缓存击穿、缓存雪崩 一、区别 缓存穿透&#xff08;Cache Penetration&#xff09;&#xff1a; 缓存穿…

展会邀请丨虹科诚邀您5月12日于北京参与制药行业质量控制技术论坛

2023年上半年&#xff0c;虹科圆满举办了成都CPQC与杭州药安大会&#xff0c;在两场顺利进行的展会上&#xff0c;虹科的产品广受青睐&#xff0c;也获得了许多客户的认可与信赖&#xff0c;虹科也将继续以优质的产品和解决方案解决您的问题。 5月12-5月13日&#xff0c;虹科将…

卷积神经网络(CNN):基于PyTorch的遥感影像、无人机影像的地物分类、目标检测、语义分割和点云分类

我国高分辨率对地观测系统重大专项已全面启动&#xff0c;高空间、高光谱、高时间分辨率和宽地面覆盖于一体的全球天空地一体化立体对地观测网逐步形成&#xff0c;将成为保障国家安全的基础性和战略性资源。随着小卫星星座的普及&#xff0c;对地观测已具备多次以上的全球覆盖…

arm安装pyrealsense

arm安装pyrealsense – Step 1 – conda install numba pip install opencv-python pip install scipy – Step 2 pyrealsense2 – 参考 https://github.com/35selim/RealSense-Jetson 编译安装pyrealsense2 git clone -b v2.50.0 --depth1 https://github.com/IntelRealSens…

【Java】哈希冲突(哈希碰撞)

文章目录 为什么发生哈希冲突&#xff08;哈希碰撞&#xff09;能否完全避免哈希冲突常用处理哈希冲突的方法1.开放地址法1.1线性探测再散列缺点&#xff1a;二次聚集 1.2二次探测再散列1.3伪随机探测再散列 2.再哈希地址法3.链地址法4.建立公共溢出区 为什么发生哈希冲突&…

2C 兼容和小技巧 合集

这里写自定义目录标题 2C 兼容小技巧 合集修改input date默认框的小图标 2C 兼容小技巧 合集 以前一直是2b端没遇到过啥兼容性 或者 奇奇怪怪改UI的地方&#xff0c;现在换成C端业务&#xff0c;就在这里记录下遇到的奇奇怪怪的需求以及解决办法吧。 这篇文章争取 长久更新&am…

Kali-linux枚举服务

枚举是一类程序&#xff0c;它允许用户从一个网络中收集某一类的所有相关信息。本节将介绍DNS枚举和SNMP枚举技术。DNS枚举可以收集本地所有DNS服务和相关条目。DNS枚举可以帮助用户收集目标组织的关键信息&#xff0c;如用户名、计算机名和IP地址等&#xff0c;为了获取这些信…

Redis持久化:RDB和AOF

Redis持久化&#xff1a;RDB和AOF Redis 数据存储在内存中&#xff0c;如果不想办法将数据保存到硬盘上&#xff0c;一旦Redis重启(退出/故障)&#xff0c;内存的数据将会全部丢失。我们肯定不想 Redis 里的数据由于某些故障全部丢失(导致所有请求都走 MySQL)&#xff0c;即便发…

软考A计划-重点考点-专题九(数据结构知识)

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分享&am…

解决报错‘cross-env‘ is not recognized as an internal...

目录 一、问题 1.1 问题描述 二、解决 2.1 解决 2.2 其它启动报错问题 一、问题 1.1 问题描述 今天在安装Ant Design Pro的后&#xff0c;执行 yarn start 时意外报错 cross-env is not recognized as an internal or external comman 报错后自然项目也就无法启动&…

组合数学第一讲

加法原则 432 9 879 96 乘法原则 3 * 2 6 800 2^55^2 因子可写成2^x5^y&#xff0c;其中x 0,1,2,3,4,5 y 0,1,2 6*3 18 4 3 * 2 10 数学归纳法 关键&#xff1a;假设n是正确的&#xff0c;证明n1也是正确的 Horse paradox&#xff08;马悖论&#xff09; 用PMI证…