JS字符串拼接的几种常见方式总结

时间:2022-11-16 D_jing20 人气:2

前言

在 JavaScript 中，使用字符串连接有几种方式：连接符（+）、反引号（`）、join()、concat()。

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

let a = 'java'
let b = a + 'script'
 
//运行结果：javascript

说明：只连接100个以下的字符串建议用这种方法，最方便

二、使用模板字符串，以反引号（ ` ）标识

ES6中新增的字符串方法，可以配合反单引号完成拼接字符串的功能

反单引号怎么打出来：将输入法调整为英文输入法，单击键盘上数字键1左边的按键。

用法：

1：定义需要拼接进去的字符串变量

2：将字符串变量用${}包起来，再写到需要拼接的地方

注意：反单引号：` ；单引号：' 。不要用错了哟~

实例：

let a = 'java'
let b = `hello ${a}script`
 
//运行结果：hello javascript

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

定义和用法：

join() 方法将数组作为字符串返回。

元素将由指定的分隔符分隔。默认分隔符是逗号 (,)。

注释：join() 方法不会改变原始数组。

语法：

array.join(separator)

参数：

参数	描述
separator	可选。要使用的分隔符。如果省略，元素用逗号分隔。

返回值：

类型	描述
String	字符串值，表示数组值，由指定的分隔符分隔。

实例：

let arr = ['hello','java','script']
let str = arr.join(" ")
 
//运行结果：hello java script

四、使用 JavaScript的 concat() 方法连接字符串

定义和用法：

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

该方法没有改变原有字符串，但是会返回连接两个或多个字符串新字符串。

注释：concat() 方法不会修改原字符串的值，与数组的 concat() 方法操作相似。

语法：

string.concat(string1, string2, ..., stringX)

参数：

参数	描述
string1, string2, ..., stringX	必需。将被连接为一个字符串的一个或多个字符串对象。

返回值：

类型	描述
String	两个或多个字符串连接后生成的新字符串。

实例：

let a = 'java'
let b = 'script'
 
let str = a.concat(b)
 
//运行结果：javascript

补充：javaScript 如何使用js追加字符串呢

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8"> 
  <meta name="Author" content=""> 
  <title>字符串追加的三种方式分享</title>
 
  <script>
    //www.maomao365.com 
    //字符串追加演示
    var a ="www.maomao365.com";
 
    //1： 在字符串后面追加一个字符
    //1.1 使用concate函数,在字符串后面追加一个或多个字符
     var b1 = a.concat("-123","-456");
    //1.2 直接使用加号(+)
     var b2 = a+"-456"+"-1234";
 
    //2.在字符串前面加上一个字符串
       var c1 ="123--"+a;
 
    //3.在字符串任意位置插入字符串
     //例: 在字符串的第4个字符位置插入123
     var d1 = a.slice(0,4) + "第4位插入的字符串" + a.slice(4)
    
      var d2 = a.slice(0,5).concat("第5位插入的字符串",a.slice(5))
 
      document.write(b1);
      document.write("<br />");
      document.write(b2);
       document.write("<br />");
      document.write(c1);
      document.write("<br />");
      document.write(d1);
       document.write("<br />");
      document.write(d2);
  </script>
 
 </head>
 <body>
  
 </body>
</html>

总结

加载全部内容