js 字符串拼接的4种方法

2023-11-19

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

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博客

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js 字符串拼接的4种方法 的相关文章

  • 在 Three.js 中绕点旋转对象的正确方法是什么?

    关于 Three js 的大多数教程 问题都建议使用 Three js 绕点旋转对象的方法是在要旋转的位置创建父对象 附加对象 然后移动子对象 然后 当父级旋转时 子级围绕该点旋转 例如 Make a pivot var pivot new
  • 如何阻止直接访问我的 JavaScript 文件?

    我使用 Minify 来缩小并缓存所有脚本请求 我只希望我的用户能够访问 JavaScript 文件的缩小版本 缩小位于www example com min我的脚本位于www example com scripts 如何阻止直接访问doc
  • 位置特征检测:固定

    我正在尝试找到一个脚本来检测设备是否放置position fixed元素相对于视口而不是整个文档 目前 标准桌面浏览器和 Mobile Safari 适用于 iOS 5 都是这样做的 而 Android 设备则相对于整个文档放置固定元素 我
  • jQuery .push 到 .get 调用中的数组给出空结果

    谁能告诉我为什么下面给我一个空字符串 当我console log contentArray in the get 回调函数它显示数据 但是当我尝试在下面的代码中执行它时 结果为空 sectionArray contentArray func
  • Number.IsNaN() 比 isNaN() 更糟糕吗

    Soooooo isNaNJavaScript 显然被破坏了 比如 isNaN isNaN isNaN true isNaN false isNaN 0 返回 false 当它们看起来都是 不是数字 在 ECMAScript 6 中 草案包
  • 通过 JavaScript 获取表单名称

    我有一个简单的问题 但我在网上找不到好的解决方案 我有这个 HTML 代码
  • 如何使用 Greasemonkey 监视静态 HTML 页面的更改?使用哈希?

    我希望我的 Greasemonkey 脚本仅在其访问的静态页面具有与以前完全相同的内容时运行 现在我可以设置一个包含该页面哈希的变量 我正在寻找一种动态散列页面的方法 以便我可以将我的散列与生成的散列进行比较 关于如何即时实现散列的任何想法
  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test
  • React Router v4 不渲染组件

    React Router v4 渲染组件存在问题 在应用程序初始加载时 它将呈现与 URL 相对应的正确组件 但是 任何后续的组件Link单击不会呈现所需的组件 图书馆 反应路由器 4 2 2 https reacttraining com
  • JavaScript推送函数中的动态变量

    我在 JavaScript 中使用推送功能 var chartData for var i 0 i lt 3 i chartData push date new Date year s mon s date s hr s min s sec
  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent
  • 计算三次贝塞尔曲线的弧长、曲线长度。为什么不工作?

    我正在用这个算法计算弧长 三次贝塞尔曲线的长度 function getArcLength path var STEPS 1000 gt precision var t 1 STEPS var aX 0 var aY 0 var bX 0
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 如何计算特定字符在字符串中出现的次数

    我正在尝试创建一个函数来查看数组中的任何字符是否在字符串中 如果是 有多少个 我尝试计算每一种模式 但是太多了 我尝试使用 Python 中的 in 运算符的替代方案 但效果不佳 function calc fit element var
  • JavaScript eval("{}") 返回行为?

    根据ECMA 262 规范 http www ecma international org publications files ECMA ST Ecma 262 pdf 以下语句返回1 eval 1 eval 1 eval 1 var a
  • Vaadin 12 将对象传递给 JavaScript 函数:无法对类进行编码

    Vaadin 12 Kotlin 项目 In my myPage html我有JavaScript myObject redirectToCheckout sessionId 1111 2222 所以我需要调用javaScript函数red
  • $resource.query 返回分割字符串(字符数组)而不是字符串

    我正在使用像下面这样的 Angular resource angular module app factory data function resource var Con resource api data update method P
  • react-native - 图像需要来自 JSON 的本地路径

    你好社区 我正在react native中开发一个测试应用程序 并尝试从本地存储位置获取图像 我实际在做什么 我将图像直接链接源提供给 var 并在渲染函数中调用此方法 react 0 14 8 react native 0 23 1 np
  • 如何通过索引访问 JSON 对象中的字段

    我知道这不是最好的方法 但我别无选择 我必须通过索引访问 JSONObject 中的项目 访问对象的标准方法是只写this objectName or this objectName 我还找到了一种获取 json 对象内所有字段的方法 fo
  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供

随机推荐

  • PO模式+数据驱动(TPshop网站的登录模块进行单元测试以及区分正向逆向用例)

    一 区分正向逆向用例 思路 在测试数据中添加一一个标识正向用例或逆向用例的标记 如 True False 步骤 调用登录方法 此登录方法中 只有输入用户名 输入密码 输入验证码 点击登录按钮 判断用例标记 判断安全退出是否存在 点击安全退出
  • 玩转 gpgpu sim 01记 —— try it

    1 短介绍 gpgpu sim 是一个gpu模拟器 可以让cuda openCL程序运行在一个软件模拟器上 而不需要硬件GPU 2 目标 用最简单省事的方式跑通一个gpgpu sim的仿真 3 gpgpu sim 一点项目特性 开发比较早
  • Java switch case 语句

    Java 的 switch case 语句是一种常用的控制流语句 用于基于不同的输入值执行不同的操作 本文将详细介绍 Java switch case 语句的作用 用法以及在实际工作中的应用 一 switch case 语句的作用 swit
  • QT 定时器使用事项

    情景 有一种特殊情况 一旦窗口系统事件队列中的所有事件都已经被处理完 一个定时为0的QTimer就会到时间了 这也可以用来当提供迅速的用户界面时来做比较繁重的工作 优点 QT app启动后不做任何操作 程序CPU占比已经达到90 以上 缺点
  • vue cli3 vue.config.js 配置详情

    module exports 基本路径 baseUrl process env NODE ENV production 输出文件目录 outputDir dist 默认dist 用于嵌套生成的静态资产 js css img fonts 目录
  • APK加壳原理简述

    先把核心原理记录一下 代码随后再补 PRE dex文件结构知识和加壳原理 先看下dex文件的基本结构 对于加壳主要关注3个关键字 1 checksum 文件校验码 使用alder32算法 校验文件除了maigc和checksum外余下的所有
  • 机器人编程和python的区别_机器人编程和少儿编程的区别

    随着少儿编程的大火 很多家长看懂了人工智能的未来趋势 都开始咨询少儿编程 除了少儿编程还有机器人编程 那么会有家长纠结 学哪个课程对孩子的教育发展和未来更好 那么要解决这个问题 就必须弄明白机器人和少儿编程的区别 机器人编程 在编程的基础上
  • Linux vim编辑器使用指南

    vim编辑器介绍 Vim是从vi发展出来的一个文本编辑器 代码补完 编译及错误跳转等方便编程的功能特别丰富 在程序员中被广泛使用 Vim 具有程序编辑的能力 可以主动以字体颜色辨别语法的正确性 方便程序设计 基本上 vim 共分为三种模式
  • Linux中ifconfig的使用

    ifconfig命令的全称是network interface configuring 用来配置Linux系统中的网卡信息 使用ifconfig命令配置的网卡配置信息 只是临时生效的 当网卡或者是机器重启 配置就会消失 只有通过修改配置文件
  • 分布式系统---幂等性设计

    分布式系统 幂等性设计 WEB资源或API方法的幂等性是指一次和多次请求某一个资源应该具有同样的副作用 幂等性是系统的接口对外一种承诺 而不是实现 承诺只要调用接口成功 外部多次调用对系统的影响是一致的 幂等性是分布式系统设计中的一个重要概
  • 操作系统笔记六(文件管理)

    1 文件逻辑结构 1 1逻辑结构的文件类型 分类 有结构文件 例如 PNG文件 无结构文件 1 2顺序文件 1 3索引文件 2 辅存的存储空间分配 2 1分配方式 连续分配 直接分配连续的存储空间 链接分配 隐式链接 在盘块内指定下一个盘块
  • 《华为机试》刷题之HJ88 扑克牌大小

    一 题目 二 示例 三 代码 dic 3 1 4 2 5 3 6 4 7 5 8 6 9 7 10 8 J 9 Q 10 K 11 A 12 2 13 joker 14 JOKER 15 while True try s1 s2 input
  • taking address of temporary错误

    前些天将一个项目从VS2013移植到Qt上 遇到了这样一个问题 Dispatch gt XCDispatchMessage linev error taking address of temporary这段代码从VS2013通过了编译 但是
  • 第十三章 公告板与粒子系统 标签: ogre公告板粒子系统ogre粒子系统

    Ogre编程入门与进阶 第十三章 公告板与粒子系统 标签 ogre公告板粒子系统ogre粒子系统 2015 07 05 14 41 1365人阅读 评论 1 收藏 举报 分类 Orge模块 16 版权声明 本文为博主原创文章 未经博主允许不
  • macbook百度网盘下载保存的文件在哪❓找不到

    困扰我好久的问题终于被我解决了 之前在AppStore里下载百度网盘 然后在百度网盘里下载文件 除了能直接打开以后 怎么都找不到文件位置 后来我终于知道了 是因为在AppStore里下载的百度网盘根本不是mac版的 如果你想下载mac版的百
  • 安卓TabLayout的使用

    安卓TabLayout的使用 我们在进行安卓开发时 常常会使用到ViewPager 为了展示更美观的效果 我们经常会选择第三方的诸如TabPageIndicator等配合ViewPager使用 但是TabPageIndicator已经很老了
  • 简单地使用webpack进行打包

    下面的webpack是4 14 0版本的 当时我学的 更新太快了 现在5 10 0了 你学习的时候 用的是最新的 就不要往下看啦 官方文档已经更新教程了 这是我看5 10 0教程后 简单搭建的打包demo 可以参考 或者你也自己去官网看文档
  • SpringCloud-Alibaba Nacos

    Nacos 简介 为什么叫Nacos 前四个字母分别为Naming和Configuration的前两个字母 最后的s为Service 是什么 一个更易于构建云原生应用的动态服务发现 配置管理和服务管理平台 Nacos Dynamic Nam
  • STM32的串口中断详解

    目录 中断配置 中断服务函数 1 中断服务函数名称查找 2 中断服务函数 3 可以选择的串口中断类型 extern u8 USART RX BUF USART REC LEN extern u16 USART RX STA 中断配置 使能接
  • js 字符串拼接的4种方法

    一 使用连接符 把想要连接的字符串串起来 let shy 帅哥 let a 我是 shy console log a 我是帅哥 二 模板字符串 模板字符串 template string 是增强版的字符串 用反引号 标识 特点 1 字符串中