In TypeScript, the string data type is useful to define variables to accept only textual data. Same like JavaScript, the TypeScript also use double quotes (") or single quotes (') to surround string data.
Following is the syntax of defining the variables with string type in typescript.
[Keyword] [Variable Name]: [string] = [Value];
[Keyword] [Variable Name]: [string];
If you observe the above syntax, we added a string data type after the variable name to tell the compiler that the string type of data the variable can hold.
var, let or const to define the scope and usage of variable.Now, we will learn how to use string data types in TypeScript with examples.
Following is the example of defining the variables with string data type in typescript.
let uname: string = "Suresh Dasari";
let ulocation: string = 'Hyderabad';
let ueducation: string = "B.Tech"
console.log(uname); // Suresh Dasari
console.log(ulocation); // Hyderabad
console.log(ueducation); // B.Tech
If you observe the above string type example, we defined multiple variables with string type to hold the required values using both single quote (') and double quote (") based on our requirements.
In ES6, the template strings have been introduced to support multiline and embedded expressions in strings. From 1.4 version, the TypeScript also supporting template strings to embed expressions into the string.
In typescript, the template strings can be created by surrounding the strings with backtick/backquote (`) character and the expressions can be embedded into strings by using $ character like ${expression}.
Following is the example of creating template strings with embedding expressions in typescript.
let uname: string = "Suresh Dasari";
let ulocation: string = 'Hyderabad';
// Normal string
let nstr: string = uname + " staying in " + ulocation;
// Template string
let tstr: string = `${uname} staying in ${ulocation}`
console.log(nstr); // Suresh Dasari staying in Hyderabad
console.log(tstr); // Suresh Dasari staying in Hyderabad
You can also create multi-line strings with embedded expressions by using template strings in typescript like as shown below.
// Multi-line Normal String
let msg: string = "Hello, " + uname + "\n" + "You are from " + ulocation + ". Enjoy Learning";
console.log(msg);
// Multi-line Template String
let msg1: string = `Hello, ${uname}
You are from ${ulocation}. Enjoy Learning`
console.log(msg1);
The above example will return the result like as shown below.
Hello, Suresh Dasari
You are from Hyderabad. Enjoy Learning
Hello, Suresh Dasari
You are from Hyderabad. Enjoy learning
This is how we can use template strings in typescript to define multi-line strings and embedded expressions in strings.
Following are the different type of methods available for string type in typescript.
| Method | Description |
|---|---|
| charAt() | It will return the character at the specified index. |
| charCodeAt() | It will return the Unicode value of the character at the specified location. |
| concat() | It will return a string that contains the concatenation of two or more strings. |
| indexOf() | It will return the position of the first occurrence of a substring. |
| match() | It will match a string with a regular expression, and returns an array containing the results of that search. |
| replace() | It will replace text in a string, using a regular expression or search string. |
| search() | It will return the first substring match in a regular expression search. |
| split() | It will split a string into substrings using the specified separator and return them as an array. |
| slice() | It will return the section of a string. |
| startsWith() | It will return true if string starts with specified substring otherwise it will return false. |
| endsWith() | It will return true if string ends with specified substring otherwise it will return false. |
| substr() | It will return a substring beginning at the specified location and having the specified length. |
| substring() | It will return the substring at the specified location within a String object. |
| toLowerCase() | It will convert all the alphabetic characters in a string to lowercase. |
| toUpperCase() | It will convert all the alphabetic characters in a string to uppercase. |
| trim() | It will remove the leading and trailing white space and line terminator characters from a string. |
| valueOf() | It will return the primitive value of the specified object. |
Following is the example of using string type methods in typescript.
let str1: string = 'Learn';
let str2: string = ' Typescript'
// concat() Method
console.log(str1.concat(str2)); // Learn Typescript
// Upper or Lower Case Methods
console.log(str1.toUpperCase()); // LEARN
console.log(str2.toLowerCase()); // typescript
// IndexOf() Method
console.log(str1.indexOf('a')); // 2
console.log(str2.indexOf('p')); // 3
// chartAt() Method
console.log(str1.charAt(4)); // n
console.log(str2.charAt(6)); // c
// replace() Method
let str3: string = 'Hi Tutlane';
console.log(str3.replace('Hi', 'Welcome to')); // Welcome to Tutlane
// split() Method
let str4: string = 'Suresh, Rohini, Trishi';
console.log(str4.split(',')); // [ 'Suresh', ' Rohini', ' Trishi' ]
console.log(str4.split(',', 1)); // [ 'Suresh' ]
If you observe the above example, we used different methods of string type based on our requirements.
This is how we can use string type in typescript to define the variables to accept textual data based on our requirements.