Web Front-endJS TutorialHow to concatenate two strings in JavaScript so that the second string must be concatenated at the end of the first string?
concat() method
The basic operation to combine two strings is concatenation. String composition is an essential part of programming. Before discussing “String Concatenation in JavaScript”, we need to get the basics clear first. A new string is generated when the interpreter performs operations.
To create a new string, the concat() method concatenates the calling string and the string parameters. Neither the initial string nor the returned string will be affected by any changes.
When connecting, the string value is first converted from the non-string type parameter.
grammar
The following is the syntax of the concat() method
concat(str1) concat(str1, str2) concat(str1, str2, ... , strN)
| gentlemen. no | Parameters and description |
|---|---|
| 1 |
strN String concatenation of one or more strings |
return
The concat() method generates a new string by concatenating the initial string and the string value passed as argument.
Example 1
This method returns a new string combining the two input strings; it does not change the given or input strings in any way. The given argument must definitely be a string, which is the disadvantage of the concat() method.
This method accepts non-string parameters, but if the given string is equal to null, a TypeError will be raised. Additionally, since strings in JavaScript are immutable, the concat() method does not actually change the string.
<!DOCTYPE html>
<html>
<title>How to concatenate two strings so that the second string must concatenate at the end of first
string in JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<div id="result"></div>
<body>
<script>
let string1 = "Tutorialspoint is the best ";
let string2 = "website available ";
let string3 = "for online education.";
let concatRes = string1.concat(string2, string3); document.getElementById("result").innerHTML =concatRes;
</script>
</body>
</html>
Example 2
In this example, let us understand how to concatenate empty string variables. We will concatenate a simple string value with an empty string variable using the concat() method.
<!DOCTYPE html>
<html>
<title>How to concatenate two strings so that the second string must concatenate at the end of first string in JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<div id="result"></div>
<body>
<script>
let tutpoint_string = ''; document.getElementById("result").innerHTML =tutpoint_string.concat('Visit ','Tut','orials','point!');
</script>
</body>
</html>
Example 3
To add two numbers, we use the operator. JavaScript can also implement string concatenation. Operators have a unique property when combining strings. You can append to an existing string to change it, or just create a new string.
<!DOCTYPE html>
<html>
<title>How to concatenate two strings so that the second string must concatenate at the end of first
string in JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<div id="result"></div>
<body>
<script>
let firstStr = 'Tutorials Point is a ';
let secondStr = ' ';
let thirdStr = 'leading Ed Tech company';
document.getElementById("result").innerHTML =firstStr+secondStr+thirdStr;
</script>
</body>
</html>
string.padEnd() method
The string.concat() method can be used for concatenation. However, it does not provide any information such as the length of the string after concatenation or the precise number that must be added.
Javascript therefore provides the string.padEnd() method to help solve this problem. This process requires two parameters. The first is the length and the second is the additional string that must be appended to the initial string.
Use the padEnd() function to pad a string with other strings. It does this in order for a string to be padded to a specific length.
At the end of the string, padding is applied to the right. Therefore, it is also called right padding.
grammar
padEnd(targetLength) padEnd(targetLength, padString)
| gentlemen. no | Parameters and description |
|---|---|
| 1 |
Target length The required length of the final string after padding. |
| 2 |
pad_string p> Optional. The provided string will be padded at the end of the string. If this option is omitted, the padEnd() method replaces pad characters with spaces. |
返回
padEnd 方法的返回值是一个在结尾处按给定字符串加长的字符串。
示例 4
在示例中让我们了解如何使用 padEnd() 方法。我们给firstString 字符串值“TutorialsPoint”，并使用padEnd() 方法在其末尾添加了一个“$”符号。此外，我们 在方法内给出 20 作为 targetLength。
因此，该方法返回 20 个字符长的最终字符串 " Tutorialspoint$$$$$$。”
<!DOCTYPE html>
<html>
<title>How to concatenate two strings so that the second string must concatenate at the end of first string in JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<div id="result"></div>
<body>
<script>
let firstString = "Tutorialspoint";
let paddfirstStr= firstString.padEnd(20, "$");
document.getElementById("result").innerHTML =paddfirstStr;
</script>
</body>
</html>
示例 5
在这个例子中，让我们了解在 padEnd() 中使用多字符 padString。在下面的示例中，我们调用了 padEnd() 并给它一个字符串，“是在线教程”，我们给了 paddSecondStr结果。
该过程通过附加“是在线教程”来扩展“Tutorialspoint”，直到最终字符串的长度为 26 个字符。 paddSecondStr 返回的最终字符串“Tutorialspointis online tu”长度为 26。
<!DOCTYPE html>
<html>
<title>How to concatenate two strings so that the second string must concatenate at the end of first string in JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<div id="result"></div>
<body>
<script>
let firstString = "Tutorialspoint ";
let paddSecondStr= firstString.padEnd(26, 'is online tutorials');
document.getElementById("result").innerHTML =paddSecondStr;
</script>
</body>
</html>
示例 6
在此示例中，让我们了解在 padEnd() 中使用 Long padString。
在下面的示例中，“带有教程点的 JavaScript”已作为 padString 传递。通过 padEnd() 方法对指定的 padString 进行修剪，使填充后的字符串长度等于 targetLength (21)。
因此，firstString.padEnd(21, "JavaScript withtutorialspoint") 返回长度为 21 的最终字符串“Learn JavaScript with”。
<!DOCTYPE html>
<html>
<title>How to concatenate two strings so that the second string must concatenate at the end of first string in JavaScript - TutorialsPoint</title>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<div id="result"></div>
<body>
<script>
let firstString = "Learn ";
let paddThirdStr= firstString.padEnd(21, 'JavaScript with tutorialspoint');
document.getElementById("result").innerHTML =paddThirdStr;
</script>
</body>
</html>
The above is the detailed content of How to concatenate two strings in JavaScript so that the second string must be concatenated at the end of the first string?. For more information, please follow other related articles on the PHP Chinese website!
Replace String Characters in JavaScriptMar 11, 2025 am 12:07 AMDetailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi
Build Your Own AJAX Web ApplicationsMar 09, 2025 am 12:11 AMSo here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J
10 jQuery Fun and Games PluginsMar 08, 2025 am 12:42 AM10 fun jQuery game plugins to make your website more attractive and enhance user stickiness! While Flash is still the best software for developing casual web games, jQuery can also create surprising effects, and while not comparable to pure action Flash games, in some cases you can also have unexpected fun in your browser. jQuery tic toe game The "Hello world" of game programming now has a jQuery version. Source code jQuery Crazy Word Composition Game This is a fill-in-the-blank game, and it can produce some weird results due to not knowing the context of the word. Source code jQuery mine sweeping game
How do I create and publish my own JavaScript libraries?Mar 18, 2025 pm 03:12 PMArticle discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.
jQuery Parallax Tutorial - Animated Header BackgroundMar 08, 2025 am 12:39 AMThis tutorial demonstrates how to create a captivating parallax background effect using jQuery. We'll build a header banner with layered images that create a stunning visual depth. The updated plugin works with jQuery 1.6.4 and later. Download the
How do I optimize JavaScript code for performance in the browser?Mar 18, 2025 pm 03:14 PMThe article discusses strategies for optimizing JavaScript performance in browsers, focusing on reducing execution time and minimizing impact on page load speed.
Getting Started With Matter.js: IntroductionMar 08, 2025 am 12:53 AMMatter.js is a 2D rigid body physics engine written in JavaScript. This library can help you easily simulate 2D physics in your browser. It provides many features, such as the ability to create rigid bodies and assign physical properties such as mass, area, or density. You can also simulate different types of collisions and forces, such as gravity friction. Matter.js supports all mainstream browsers. Additionally, it is suitable for mobile devices as it detects touches and is responsive. All of these features make it worth your time to learn how to use the engine, as this makes it easy to create a physics-based 2D game or simulation. In this tutorial, I will cover the basics of this library, including its installation and usage, and provide a
Auto Refresh Div Content Using jQuery and AJAXMar 08, 2025 am 12:58 AMThis article demonstrates how to automatically refresh a div's content every 5 seconds using jQuery and AJAX. The example fetches and displays the latest blog posts from an RSS feed, along with the last refresh timestamp. A loading image is optiona
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
