快捷導(dǎo)航

js字符串拼接的4種常見方法

更新時(shí)間：2023年07月19日 09:44:33 作者：西晉的no1

JavaScript中,字符串拼接是非常常見的操作,拼接字符串有很多種方式,這篇文章主要給大家介紹了關(guān)于js字符串拼接的4種常見方法,需要的朋友可以參考下

一、使用連接符 + 把想要連接的字符串串起來

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

二、模板字符串

模板字符串（template string）是增強(qiáng)版的字符串，用反引號(hào)（`）標(biāo)識(shí)，特點(diǎn)：

1) 字符串中可以出現(xiàn)換行符

2) 可以使用 ${xxx} 形式輸出變量

1. 最基礎(chǔ)的變量拼接

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

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

// html代碼以及換行文本
let hi=`<div>
    <h2>你好呀！</h2>
</div>`
console.log(hi)  // 原樣輸出，包括換行

3. 插入一個(gè)表達(dá)式

// 插入表達(dá)式
let x=30;
let y=10;
let a=`x-y=${x-y}`
console.log(a)  // 輸出表達(dá)式計(jì)算結(jié)果

4. 在模版字符串里面調(diào)用函數(shù)表達(dá)式

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

三、使用 js的 concat() 方法連接字符串或數(shù)組

concat() 方法用于連接兩個(gè)或多個(gè)數(shù)組或者字符串。

該方法不會(huì)改變現(xiàn)有的數(shù)組，而僅僅會(huì)返回被連接的新數(shù)組。

字符串就會(huì)拼接在一起

// 拼接數(shù)組
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() 方法，把數(shù)組中的所有元素放入一個(gè)字符串

join() 方法把數(shù)組中的所有元素放入一個(gè)字符串：

join()——默認(rèn)每個(gè)元素中之間是逗號(hào)隔開

join("-")——每個(gè)元素之間以- 隔開，分隔符可自定義

var arr=[1,2,3];
var str=arr.join();// 默認(rèn)是逗號(hào)，也可以自定義連接符
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